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

如何克隆现有组件而不在Extjs 4.1中编辑创建的组件（Window）

1 个答案: