Extjs 克隆面板

Question

panel({}) 及其所有内容，如网格、表单以及想要将确切的克隆呈现到另一个面板是否有办法做到这一点.. 是否可以使用 panel.getEl() 或是否有任何其他方式...请帮助

Answer 1

sra 的回答不正确。 Ext 的 cloneConfig 完全符合您的要求。 http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Component-method-cloneConfig

以下代码将两个“相同”面板呈现到正文。

var panel = Ext.create('Ext.Panel', {
    width: 500,
    height: 300,
    title: "HBoxLayout Panel",
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    renderTo: document.body,
    items: [{
        xtype: 'panel',
        title: 'Inner Panel One',
        flex: 2
    },{
        xtype: 'panel',
        title: 'Inner Panel Two',
        flex: 1
    },{
        xtype: 'panel',
        title: 'Inner Panel Three',
        flex: 1
    }]
});

var clone = panel.cloneConfig();

Answer 2

我必须承认旧的答案并不完全正确。组件的克隆从 ExtJS2 开始可用，可以通过 cloneConfig(overrides) 完成，这是一个实例方法。

这将返回当前实例的克隆以及应用的覆盖（如果设置）。干净的克隆将要求您使用正确的配置，这意味着不会在配置中创建任何实例。 Here are some information bout this 更多详情请阅读Sencha guides

---

旧答案 （仅当要克隆配置的组件包含实例而不是普通配置时才有效）

不，没有内置的方法可以做到这一点。你不应该尝试它。考虑将面板包装在一个返回其实例的函数中（一种简单的工厂）。

编辑

类似这样的：

Factory.Panel = function (config) {
    var defaults = {
        labelWidth: 80,
        labelAlign: 'left',
        layout: 'form',
        width: 720,
        autoHeight: true,
        header: false,
        bodyStyle: 'padding:10px 15px;'
    };
    var cfg = Ext.apply({}, config, defaults);
    var cmp = new Panel(cfg);
    return cmp;
}

您可以添加任意数量的函数参数。这将是一种干净的方法。您只需克隆简单的对象，如记录。请注意，Factory 是一个命名空间！