ExtJS4：如何将参数传递给 initComponent答案

【问题标题】：ExtJS4: How to pass arguments to initComponentExtJS4：如何将参数传递给 initComponent
【发布时间】：2012-05-02 09:21:54
【问题描述】：

我正在使用 Sencha Architect 2。我正在尝试生成具有文本搜索和显示结果的表格的通用 UI 元素。通用意味着我想将它用于几种不同类型的搜索，例如对于用户、角色或其他内容。

因此，在这种情况下，我绝对喜欢 Sencha Architect 2 的一点是它总是生成类。这是我生成的类：

Ext.define('ktecapp.view.ObjSearchPanel', {
    extend: 'Ext.container.Container',
    alias: 'widget.objsearchpanel',

    height: 250,
    id: 'UserSearchPanel',
    itemId: 'UserSearchPanel',
    width: 438,
    layout: {
        columns: 3,
        type: 'table'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'textfield',
                    itemId: 'txtSearchText',
                    fieldLabel: 'Search Text',
                    colspan: 2
                },
                {
                    xtype: 'button',
                    id: 'searchObj',
                    itemId: 'searchObj',
                    text: 'Search',
                    colspan: 1
                },
                {
                    xtype: 'gridpanel',
                    height: 209,
                    itemId: 'resultGrid',
                    width: 430,
                    store: 'UserDisplayStore',
                    colspan: 3,
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            width: 60,
                            dataIndex: 'ID',
                            text: 'ID'
                        },
                        {
                            xtype: 'gridcolumn',
                            width: 186,
                            dataIndex: 'DISPLAYNAME',
                            text: 'Displayname'
                        },
                        {
                            xtype: 'gridcolumn',
                            width: 123,
                            dataIndex: 'JOBTITLE',
                            text: 'Job Title'
                        },
                        {
                            xtype: 'actioncolumn',
                            width: 35,
                            icon: 'icons/zoom.png',
                            items: [
                                {
                                    icon: 'icons/zoom.png',
                                    tooltip: 'Tooltip'
                                }
                            ]
                        }
                    ],
                    viewConfig: {

                    },
                    selModel: Ext.create('Ext.selection.CheckboxModel', {

                    })
                }
            ]
        });
        me.callParent(arguments);
    }
});

我遇到的问题是一切都需要非常可定制，列的数据索引，商店，...... 那么我怎样才能为 ObjSearchPanel 类获得一个构造函数，我传递所有这些信息呢？在上面的代码中，这一切看起来几乎都是硬编码的......

提前致谢启

【问题讨论】：

标签： constructor extjs4 sencha-architect

【解决方案1】：

使用配置，

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Class-cfg-config

Ext.define('SmartPhone', {
     config: {   
         hasTouchScreen: false,
         operatingSystem: 'Other',
         price: 500
     },
     constructor: function(cfg) {
         this.initConfig(cfg);
     }
});

var iPhone = new SmartPhone({
     hasTouchScreen: true,
     operatingSystem: 'iOS'
});

iPhone.getPrice(); // 500;
iPhone.getOperatingSystem(); // 'iOS'
iPhone.getHasTouchScreen(); // true;
iPhone.hasTouchScreen(); // true

【讨论】：

您的回答很有帮助，但是，如果我只想提供不完整的信息而不是整个配置，则无法使用您建议的方式。

【解决方案2】：

实际上（在 ExtJS 4 中），当您将配置对象传递给构造函数时，该配置对象被分配给 this.initialConfig 变量，并且仍然可用于该类的其他函数。所以你可以在initComponent 中使用它。

您仍然可以在 ExtJS 3.3 中找到类似 Ext.apply(this, Ext.apply(this.initialConfig, config)); 在类的 initComponent 中的代码。但是，使用它需要您自担风险，因为这不在 ExtJS 4 的文档中，只在源代码中找到。

【讨论】：