Search code examples
javascriptextjscomboboxfilteringstore

ExtJS Combobox Error: Cannot read property 'store' of undefined


I have a Tab panel with few tabs. One of them contains grid and the grid contains 3 itmes: 1 item with editor type "textfield", and 2 items with editor of type "combobox".

The problem: I want to filter the combobox store based on the previous combobox. But for some reason it works only the first time. After that the store returns undefined.

Here is my code:

items:[{
    xtype: 'grid',
    id:'schema',
    border: false,      
    data:[],
    columns:
    [{
        text     : 'Size',
        dataIndex: 'size',
        id: "SizeDropdown",
        width    : 200,
        sortable : true,
        editor   : {
            xtype: 'combobox',
            id:'SelectSize',
            editable:true,

            valueField: 'typeValue',
            displayField: 'typeValue',
            mode:'local',
            lastQuery: '',
            listeners:{
            },
            store: new Ext.data.SimpleStore({
                fields: ['size', 'typeValue'],
                data: [
                        ['char', '12'],
                        ['char', '30'],
                        ['char', '31'],
                        ['int', '250'],
                        ['int', '500'],
                        ['int', '1000'],
                    ]
            }),
            allowBlank: false,
            validator: function(input){                                 
                return true;
            }
        }   
    }],
    listeners: {
        beforeitemclick: function (eventThis,  record,  rowIndex, e) {

            var SizeStore = Ext.getCmp('SizeDropdown').editor.store

            SizeStore.clearFilter();
            SizeStore.filter('size', record.data.type);
        }
    }

'record.data.type' returns 'char' or 'int', depending on the previous combobox and the filtering works okay. But only the first time. After that it breaks here:

var SizeStore = Ext.getCmp('SizeDropdown').editor.store

And returns:

Cannot read property 'store' of undefined

I'm using ExtJs "4.0.7"


Solution

  • Declaring the store outside the Tab class did the job.

    Here is what I did:

            var sizeDropdownStore = new Ext.data.SimpleStore({
                fields: ['size', 'typeValue'],
                data: [
                        ['char', '12'],
                        ['char', '30'],
                        ['char', '31'],
                        ['int', '250'],
                        ['int', '500'],
                        ['int', '1000'],
                ]
            });
    
    
            ...{
                xtype: 'combobox',
                id:'SelectSize',
                editable:true,
                valueField: 'typeValue',
                displayField: 'typeValue',
                mode:'local',
                listeners:{
                },
                store: sizeDropdownStore,
                allowBlank: false
            }...