Question

我对Extjs非常陌生，并且已经构建了此组件：

var extra ='';

Ext.define('mycomponent', {
    extend: 'Ext.container.Container',
    id: 'mycomp',
    alias: 'widget.newComponent',
    xtype: 'mycomp',

    layout: {
        type: 'hbox'
    },
    items: [
        {
            xtype: 'combobox',
            publishes: 'value',
            displayField: 'name',
            valueField: 'key',
            queryMode: 'local',
            lastQuery: '',
            anyMatch: true,
            anchor: '-15',
            minChars: 0,
            typeAhead: true,
            triggerAction: 'all',
            selectOnFocus: true,
            typeAheadDelay: 100,
            labelWidth: 100,
            labelAlign: 'right',
            pageSize: 0,
            clearFilterOnBlur: true,
            defaultValue: 0,
            matchFieldWidth: false,
            allowBlank: true,
            forceSelection: true,
            editable: true,
            enableKeyEvents: true
        },
        {
            xtype: 'button',
            text: 'Go',
            listeners: {
                click: function(item, e, eOpts) {
                   console.log('Result', extra);
                }
            }
        }
    ],

    initComponent: function () {
        var that = this;
        extra = that.extra;
        this.id += that.extra;
        this.xtype += that.extra;

        this.items[0].id = 'mycombo' + that.extra;
        this.items[0].alias = 'mycombo' + that.extra;
        this.items[1].id = 'btn' + that.extra;

        this.callParent(arguments);
    }
});

这是我发现的用于为组件及其子项设置不同ID的方法。

然后我想在另一个视图中创建此组件的两个实例，如下所示：

Ext.define('myView', {
    extend: 'Ext.window.Window',
    id: 'myView',
    xtype: 'myView',

    modal: true,
    bodyPadding: 10,
    height: 520,
    width: 575,
    closeAction: 'destroy',
    resizable: false,

    items: [
        {
            xtype: 'label',
            text: 'My test:'
        },
        new mycomponent({
                                            xtype: 'mycomp',
                                            extra: 'comp1'
                                        }),
                                        new mycomponent({
                                            xtype: 'mycomp',
                                            extra: 'comp2'                                        })
],
...

无论我单击Go按钮上的哪个组件，它都会在浏览器控制台Result comp2中打印。 mycomponent的行为像单例。这就是为什么我使用new mycomponent({...来查看是否以此方式创建组件的新实例失败的原因。如何在不死于尝试的情况下使它正常工作？

顺便说一下Exjs 6.x ...

Answer 1

item数组中的每个对象都是相应组件的新实例，以您的代码为例，您可以执行类似的操作将不同的属性传递给每个组件。

items: [{
    xtype: 'mycomp',
    id: 'id1',
    extra: 'extraValueA'
}, {
    xtype: 'mycomp',
    id: 'id2',
    extra: 'extraValueB'

}]

检出Fiddle并查看工作示例

extjs如何在同一视图中使用两个或更多个不同的自定义组件实例

1 个答案: