Как клонировать компонент (Window) в ExtJS 4.1

Question

Я определим Source Window как

Ext.define('MyWindow', { 
    extend: 'Ext.window.Window', 
    title: 'Source Window', 
    modal: true, 
    height: 200, 
    width: 400, 
    closable:false, 
    tbar: [{  
     text:'hide', 
     handler:function(){ 
      this.up('window').hide(); 
     } 
    }], 
    items: { 
     xtype: 'grid', 
     border: false, 
     columns: [{header: 'World'}], 
     store: Ext.create('Ext.data.ArrayStore', {}) 
    } 
    }); 

И я удалить все элемент окна, а затем добавить новый элемент в нем, как

var w = new MyWindow(); 
tf = Ext.create('Ext.form.field.Text', { 
     name: 'name', 
     fieldLabel: 'Name' 
}); 
w.removeAll(true); 
w.add(tf); 
w.show(); 
w.hide(); 

Теперь я хочу клонировать мое окно (окно добавлен новый элемент), как

Ext.create('Ext.Button', { 
     text: 'Clone to new', 
     visible: false, 
     renderTo: Ext.getBody(), 
     handler: function() { 
      var newWin; 
      Ext.WindowManager.each(function(win) { 
       newWin = win.cloneConfig(); 
       newWin.title = "Clone Window"; 
       newWin.show(); 
      }); 
     } 
     }); 

Но это показать Source Window ?? Как исправить Вот мой полный код http://jsfiddle.net/MKUSB/

Answer 1

Да, потому что cloneConfig клонов только конфигурации компонента, а не его элементы. Элементы нового окна появятся из исходного окна, и в вашем случае вы должны удалить исходные элементы и затем клонировать новые элементы компонента. Мой код клонирует всегда только одно окно, ваш код сделал это экспоненциально, если вы нажали более одного раза на кнопку Clone Window.

Рабочий пример: http://jsfiddle.net/ph5Zy/

Полный код:

Ext.define('MyWindow', { 
    extend: 'Ext.window.Window', 
    title: 'Source Window', 
    modal: true, 
    height: 200, 
    width: 400, 
    closable:false, 
    tbar: [{  
     text:'hide', 
     handler:function(){ 
      this.up('window').hide(); 
     } 
    }], 
    items: { 
     xtype: 'grid', 
     id: 'grid', 
     border: false, 
     columns: [{header: 'World'}], 
     store: Ext.create('Ext.data.ArrayStore', {}) 
    } 
    }); 


    Ext.onReady(function() { 
     // create new window with new item  
     var i = 1; 
     var w = new MyWindow(); 
     tf = Ext.create('Ext.form.field.Text', { 
       name: 'name', 
       fieldLabel: 'Name', 
       id: 'tf' 
     }); 
     w.removeAll(true); 
     w.add(tf); 
     w.show(); 
     w.hide(); 

     Ext.create('Ext.Button', { 
      text: 'Show all', 
      visible: false, 
      renderTo: Ext.getBody(), 
      handler: function() { 
       Ext.WindowManager.each(function(win) { 
        win.show(); 
       }); 
      } 
     }); 

      Ext.create('Ext.Button', { 
      text: 'Clone to new', 
      visible: false, 
      renderTo: Ext.getBody(), 
      handler: function() { 
       var newWin = w.cloneConfig(); 
       newWin.remove('grid'); 
       newWin.add(w.getComponent('tf').cloneConfig()); 
       newWin.title = "Clone Window"; 
       newWin.show(); 
      } 
      }); 
    });