5

我正在使用 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 类的构造函数这样我传递所有这些信息的函数？在上面的代码中，这一切看起来几乎是硬编码的......

提前感谢凯

4

2 回答 2

8

使用配置，

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
于 2012-05-02T10:10:54.707 回答
4

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

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

于 2012-05-05T02:30:23.210 回答