Question

面板（{}）及其所有内容，如网格，表单，并希望将精确克隆呈现给另一个面板是否有办法实现它..是否可以使用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是命名空间！

Extjs克隆一个面板

2 个答案: