Extjs 克隆面板

Posted 2023-02-26

【中文标题】Extjs 克隆面板

【英文标题】：Extjs Cloning a panel

【发布时间】：2011-05-10 12:59:04

【问题描述】：

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

【参考方案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();

【讨论】：

@sra Clone the current component using the original config values passed into this instance by default. Available since: Ext 2

【参考方案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 是一个命名空间！

【讨论】：

嗨，你的意思是面板的实例..它是否还包括面板的内容..你能多解释一下吗，即使是一个小例子也会有帮助..谢谢你跨度>

嗨..我试过你的例子，但它似乎只克隆面板，面板中的项目怎么样..我如何克隆那些..

澄清一件事；你并没有真正克隆，这更像是一个工厂。我你有更多嵌套的项目，我不知道你需要将它们包含在由另一个调用的自己的“工厂”中，还是需要将它们实现为“xtypes”，以便 ExtJS 可以处理它们。