javascript - ExtJS Ext.Button 复用

标签 javascript button extjs components reusability

我从 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>

JS

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 的正确方法是什么?

最佳答案

如果您非常担心性能。也许你可以改变 div 和 id 的位置。

使用纯CSS定位更改并交换id。如果不影响其他功能的话。

关于javascript - ExtJS Ext.Button 复用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18692823/

相关文章:

javascript - 如何在extjs6中发送Ajax到远程服务器?

javascript - 循环遍历对象项

javascript - firebase:获取ThenableReference的 key

javascript - 在任何表单更改上启用按钮

python - 在 Python tkinter 中使用按钮计数器

css - 有没有办法在文件上传按钮中更改 "browse"?

javascript - 在下拉列表 onchange 事件中

javascript - 将输入按钮包装在 HREF 中

javascript - 解释 ExtJS 4 事件处理

javascript - 在视口(viewport)中有条件加载项目