如何再次使用 ExtJs4 组件？

Posted 2023-02-23

【中文标题】如何再次使用 ExtJs4 组件？

【英文标题】：How can I use ExtJs4 Component again?

【发布时间】：2012-03-27 14:10:52

【问题描述】：

我问了很多问题，但没有人回答我...

请回答这个问题..

嗨，我是 Extjs4 的新手

我用的是 extjs4，

我制作一个组件，像这样

var child1 = Ext.create('Ext.form.Panel', 
                    xtype : 'panel',
                    title : 'child1',
                    html : 'child1'
                );

而且，我将它用于窗口 1，就像这样

var win1 = Ext.create('Ext.window.Window', 
                    title : 'window1',
                    height : 200,
                    width : 400,
                    layout : 'fit',
                    items : child1
                ).show();

我想使用'child1'，另一个窗口，像这样

var win2 = Ext.create('Ext.window.Window',  // setting
            height : 200,
            width : 200,
            layout : 'fit',
            title : 'window2',
            items : child1
        ).show();

但这是错误的代码。

只能在 Window2 中看到。

但我想在 win1 和 win2 中都使用 'child1'...

我该怎么做？，谢谢！

【问题讨论】：

请从您的问题标题中删除 etxjs/extj4//。你不需要在标题中重复标签

贾斯汀在下面有正确的答案，这里是例子：jsfiddle.net/dbrin/N7Lkg 你的例子不起作用的原因是因为面板的 DOM 实际上被移动到了 window1 DOM，然后同一个面板 DOM 是再次移动到窗口 2 的内部...相反，您必须创建同一个 DOM 的两个实例才能显示在两个单独的浮动窗口中。

【参考方案1】：

如果您要重用组件，请创建视图并使用小部件分配别名。*

Ext.define('MyApp.view.Child1', 
    extend: 'Ext.panel.Panel',
    alias: 'widget.child1',
    html: 'child1'
);

然后，当您创建窗口时，您可以通过 xtype 引用。

var win1 = Ext.create('Ext.window.Window', 
    title : 'window1',
    height : 200,
    width : 400,
    layout : 'fit',
    items : [ xtype: 'child1']
).show();

【参考方案2】：

你可以同时使用它们。但是 items 是数组 - 所以你需要将其更改为 items: [ child1 ]