ExtJS Ext.Button 重用答案

【问题标题】：ExtJS Ext.Button reuseExtJS Ext.Button 重用
【发布时间】：2013-09-09 06:47:39
【问题描述】：

我从 Sencha 学习 ExtJS 并有下一个简单的任务：

我的页面上有 2 个 div
在第一个 div 中，我渲染 Ext.Button
在按钮上单击我想将其移动到另一个 div
就是这样

我写了这段代码：

HTML

<div id="div_1" style="border:1px solid gray; padding:5px; margin:5px;"></div>
<div id="div_2" style="border:1px solid gray; padding:5px; margin:5px;"></div>

Ext.create('Ext.Button',{
 str: 'I like to move it!',
 text:'Test Button',
 renderTo:'div_1',
 handler:function(){
     var parent_id = Ext.get(this.id).parent().id;
     var renderTo = (parent_id == 'div_1') ? 'div_2' : 'div_1';
     this.cloneConfig({
         renderTo:renderTo
     });
     Ext.get(parent_id).update('');
 }
});

这段代码解决了这个问题，但我认为创建新按钮并通过 dom 操作清除旧按钮是个坏主意。

问题：将按钮移动到另一个 div 的正确方法是什么？

【问题讨论】：

标签： javascript button extjs components reusability

【解决方案1】：

如果您对性能如此担心。也许您可以更改 div 和 id 的位置。

使用纯 css 定位更改和交换 id。如果它不影响其他功能。

【讨论】：

感谢您的回复！性能不会打扰我。我认为必须以更正确的方式以 ExtJS 风格进行此操作。但是我找不到。

【解决方案2】：

Ettavolt，来自Sencha forum 给我这个决定：

handler:function(){
  var el = this.el,
        current = el.up('').id;
  el.appendTo((current == 'div_1') ? 'div_2' : 'div_1');
}

我认为这是移动按钮或任何其他元素的最佳方式。

【讨论】：