ExtJS Ext.Button reuse

Question

I learn ExtJS from Sencha and have next simple task:

• I have 2 div's on the page
• In first div i render Ext.Button
• On the Button click i want to move it to another div
• That's all

I write this code:

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('');
 }
});

This code solves the problem, but i think it's a bad idea to create new button and clear old through dom manipulation.

Question: What is the correct way to move button to another div?

Answer 1

Ettavolt, from Sencha forum give me this decision:

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

I think it's a best way to move button or any other element.

Answer 2

If you are so worried about the perfomance. May be you can change the position of the divs and the ids.

using pure css positioning change and swaping the id. If it doesn;t affect other functionalities.