Question

我正在使用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);
    }
});

我遇到的问题是一切都需要相当可定制，列的dataIndexes，商店，...... 那么我如何获得类似ObjSearchPanel的函数的构造函数，我传递了所有这些信息呢？在上面的代码中，所有这些看起来都非常硬编码......

提前致谢启

Answer 1

使用config，

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

Answer 2

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

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

ExtJS4：如何将参数传递给initComponent

2 个答案: