当前位置：文江博客话题详情

Extjs 克隆面板

发布于 2024-11-06 01:11:47 字数 105 浏览 0 评论 0原文

panel({}) 及其所有内容，如网格、表单，并且想要将精确的克隆渲染到另一个面板，有没有办法做到这一点..是否可以使用 panel.getEl() 来做到这一点，或者还有其他方法吗...请帮忙

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

失去的东西太少 2024-11-13 01:11:47

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

The sra's answer is incorrect. Ext's cloneConfig does exactly what you want it to. http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Component-method-cloneConfig

The following code renders two of the "same" panels to the body.

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

回复收藏 0 原文

仙气飘飘 2024-11-13 01:11:47

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

这将返回当前实例的克隆以及应用的覆盖（如果设置）。干净的克隆将要求您使用正确的配置，这意味着配置中不会创建任何实例。这里有一些关于此的信息有关更多详细信息，请阅读Sencha 指南

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

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

编辑

如下内容：

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

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

I must admit that the old answer was not entirely correct. Cloning of Componments is available since ExtJS2 and can be done via cloneConfig(overrides) which is a instance-method.

This will return a clone of the current instance with the applied overrides (if set). A clean clone will require you to use correct configurations, meaning no instances are created within the config. Here are some information bout this For more details read the Sencha guides

Old answer (only valid if the components to clone configs contains instances instead of plain configurations)

~~No, there is no buildin way to do this. And you should not try it. Consider to wrap the panel in a function that returns a instance of it (a simple sort of factory).~~

Edit

Something like this:

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

You can add as much function params as you like. This would be a clean way to do it. You just can clone simple object like a record. Note that Factory is a Namespace!

回复收藏 0 原文

~没有更多了~