how to reconfigure grid with store and columns

Question

I am trying to write a generic panel component with a search text field, a search button and a grid displaying the results. What I am aiming for is a generic component and you can create different instances of it with more or less columns, different column titles and different search logic.

I have created ExtJS4 code with Sencha Architect 2 where this stuff looks as follows:

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);
},

The store and the 2 columns are only dummies. I want to provide the real store and the real column configuration in the constructor of the custom component. I found the GridPanel.reconfigure (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-method-reconfigure) method which seemed to perfectly fit my needs. However, the following code yields an error:

    ////////////////////////
    // 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);

which is:

Uncaught TypeError: Cannot read property 'length' of undefined

in the method onLastFocusChanged of the selection model. If I pass null as first argument of reconfigure then this doesn't happen but I would like to dynamically create a store (otherwise each instance of my component uses the same store which is certainly not good).

Maybe my configuration of the store is not correct but I copied it from the code Sencha Architect creates, so it can't be that wrong.

Thanks for any hint. Cheers Kai

========================================

Hi, now changed the code:

// 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);    
}

and I still get the same error:

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

There are two things I would correct before you'd be able to completely solve this problem. The first, and lest important is that I'd recommend putting the textfield and button in a tbar. The second, which is more important, a grid column configuration requires Ext.grid.column.Column and not a blank object (like your item2). You should really have var item2 = Ext.create('Ext.grid.column.Column'); and better still, provide a config to this create method rather than adding the column configs manually later on. — Izhaki

kaidentity kaidentity · Accepted Answer · 2012-07-18T14:20:33

I've fixed it. I was trying to do this in the render event. After that didn't work, I added a button to the page and called reconfigure in the button click handler. That worked fine. This led me to try the afterrender event, which does the trick.

Thanks for your help,

Cheers Kai

how to reconfigure grid with store and columns

1 Answers