Extjs 如何使用存储和列重新配置网格

我正在尝试编写一个通用面板组件，其中包含一个搜索文本字段、一个搜索按钮和一个显示结果的网格。我的目标是创建一个通用组件，您可以创建它的不同实例，包含更多或更少的列、不同的列标题和不同的搜索逻辑

我已经使用Sencha Architect 2创建了ExtJS4代码，这些代码如下所示：

initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
        items: [
            {
                xtype: 'textfield',
                itemId: 'txtObjSearch',
                fieldLabel: 'Search for'
            },
            {
                xtype: 'button',
                itemId: 'btnSearch',
                icon: '/rhidmoplus/icons/zoom.png',
                text: 'Search'
            },
            {
                xtype: 'gridpanel',
                itemId: 'gridResultObjects',
                title: '',
                store: 'testStore',
                colspan: 2,
                columns: [
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'MSKEYVALUE',
                        text: 'ID'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'DISPLAYNAME',
                        text: 'Displayname'
                    }
                ],
                viewConfig: {
                    itemId: 'gridView'
                }
            }
        ]
    });

    me.callParent(arguments);
},

商店和两列都只是些傻瓜。我想在自定义组件的构造函数中提供真正的存储和真正的列配置。我找到了GridPanel.configure(http://docs.sencha.com/ext-js/4-1/#！/api/Ext.grid.Panel method（重新配置）方法，它似乎非常适合我的需要。 但是，以下代码会产生错误：

    ////////////////////////
    // Prepare store
    ////////////////////////

    // prepare fields and columns
    var __fields = [];
    var __columns = [];

    for (var jj=0; jj<config.columns.length; jj++) {
        var item2 = {};
        var item = [];
        // for fields
        item.name = config.columns[jj].title;
        __fields.push (item);
        // for columns
        item2.xtype = 'gridcolumn';
        item2.dataIndex = config.columns [jj].dataIndex;
        item2.text = config.columns [jj].title;
        __columns.push (item2);    
    }

    console.debug ('columns.length = ' + __columns.length + ', fields.length = ' + __fields.length);

    var sm = new Ext.selection.RowModel();
    //sm.bindComponent (grid.getView ());

    var __store = Ext.create ('Ext.data.Store', {
        storeId: config.storeId,
        fields: __fields,
        selModel: sm,
        proxy: {
            type: 'ajax',
            url: '/rhidmo/rest/ktec_js_searchUtils',
            reader: {
                type: 'json',
                root: 'entries'
            }
        }
    });

    grid.reconfigure (__store, __columns);

---

我已经修好了。我试图在渲染事件中执行此操作。之后，我在页面中添加了一个按钮，并在按钮点击处理程序中调用了重新配置。效果很好。 这让我尝试了afterrender事件，它实现了这个技巧

谢谢你的帮助

干杯

---

Kai

我已经修好了。我试图在渲染事件中执行此操作。之后，我在页面中添加了一个按钮，并在按钮点击处理程序中调用了重新配置。效果很好。 这让我尝试了afterrender事件，它实现了这个技巧

谢谢你的帮助

干杯

---

Kai

错误发生在哪里？你能检查一下堆栈吗？在你能够完全解决这个问题之前，有两件事我要纠正。第一，也是最重要的一点是，我建议将

文本字段

和

按钮

放在

tbar

中。第二个更重要的是，网格列配置需要

Ext.grid.column.column

，而不是空白对象（如

item2

）。您应该真正拥有

var item2=Ext.create（'Ext.grid.column.column'）

更好的是，为这个create方法提供一个配置，而不是稍后手动添加列configs。请查看更新的描述，错误发生在哪里？你能检查一下堆栈吗？在你能够完全解决这个问题之前，有两件事我要纠正。第一，也是最重要的一点是，我建议将

文本字段

和

按钮

放在

tbar

中。第二个更重要的是，网格列配置需要

Ext.grid.column.column

，而不是空白对象（如

item2

）。您应该真正拥有

var item2=Ext.create（'Ext.grid.column.column'）

更好的是，提供此创建方法的配置，而不是稍后手动添加列配置。请参阅更新的说明

// prepare fields and columns
var __fields = [];
var __columns = [];

for (var jj=0; jj<config.columns.length; jj++) {
    var item2 = Ext.create ('Ext.grid.column.Column', {
        dataIndex: config.columns [jj].dataIndex,
        text: config.columns [jj].title
    });
    var item = Ext.create ('Ext.data.Field', {
        name: config.columns[jj].title
    });
    __fields.push (item);
   __columns.push (item2);    
}

Uncaught TypeError: Cannot read property 'length' of undefined
Ext.define.onLastFocusChangedext-all-debug.js:89284
Ext.define.setLastFocusedext-all-debug.js:59431
Ext.define.clearSelectionsext-all-debug.js:59543
Ext.define.refreshext-all-debug.js:59523
Ext.define.bindext-all-debug.js:59143
Ext.define.bindStoreext-all-debug.js:60584
Ext.define.bindStoreext-all-debug.js:78007
Ext.define.reconfigureext-all-debug.js:78033
Ext.define.configureGenericSearchPanel.js:141
Ext.define.onStoreTestPanelRenderMainController.js:471
fireext-all-debug.js:10658