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