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

Answer 1

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