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.