Question

After having gone back to the ExtJS4 docs and copying in their examples line for line trying to troubleshoot where I could have gone wrong, I am stumped. Sniffing around the issue of initComponent being in an unfortunate order of operations.

The store that is being defined is 1) not populating the field and 2) is said to be undefined after trying to call it from the field listener.

I am defining a store as such in initComponent,

Ext.define('X.view.NewLogWindow', {
extend: 'Ext.window.Window',
xtype:'newlogwindow',
itemId: 'newLogWindow',
width: 300,
height: 140,
modal: true,
title: 'Create Log',
layout: 'fit',
initComponent: function() {

    this.monthStore = Ext.create('Ext.data.Store', {
        fields : [
            {name : 'id', type : 'int'}, {name : 'month', type : 'string'}
        ],
        autoLoad: true,
        data : [
            {"id" : 0, "month" : "January"},
            {"id" : 1, "month" : "February"},
            {"id" : 2, "month" : "March"},
            {"id" : 3, "month" : "April"},
            {"id" : 4, "month" : "May"},
            {"id" : 5, "month" : "June"},
            {"id" : 6, "month" : "July"},
            {"id" : 7, "month" : "August"},
            {"id" : 8, "month" : "September"},
            {"id" : 9, "month" : "October"},
            {"id" : 10, "month" : "November"},
            {"id" : 11, "month" : "December"}
        ]
    });

    var x = 'fixme';

    console.log(this.monthStore);
    console.log(x);


    this.callParent();


}

Then, I am assigning the store to the combobox in the form panel as such:

items: [
    {
        xtype: 'form',
        margin: 10,
        border: false,
        defaults: {allowBlank: false},
        items: [
            {
                xtype: 'combobox',
                fieldLabel: 'Log Month',
                store: this.monthStore,
                queryMode : 'local',
                displayField: 'month',
                valueField: 'id',
                listeners: {blur: function(field)
                {
                    console.log(this.monthStore);
                    console.log(this.x);
                    }

                }
            }
        ]
    }
]

Here are the outputs from my console logging:

constructor NewLogWindow.js:40
fixme NewLogWindow.js:41
undefined NewLogWindow.js:74
undefined NewLogWindow.js:75

Thanks in advance.

Answer 1

Just use the storeId config so you will have a handle on the store, e.g.:

initComponent: function() {

    Ext.create('Ext.data.Store', {
        storeId: 'months',
        fields : [
            {name : 'id', type : 'int'}, {name : 'month', type : 'string'}
        ],
        autoLoad: true,
        data : [
            {"id" : 0, "month" : "January"},
            {"id" : 1, "month" : "February"},
            {"id" : 2, "month" : "March"},
            {"id" : 3, "month" : "April"},
            {"id" : 4, "month" : "May"},
            {"id" : 5, "month" : "June"},
            {"id" : 6, "month" : "July"},
            {"id" : 7, "month" : "August"},
            {"id" : 8, "month" : "September"},
            {"id" : 9, "month" : "October"},
            {"id" : 10, "month" : "November"},
            {"id" : 11, "month" : "December"}
        ]
    });

// etc...

Then you can use store: Ext.StoreManager.lookup('months') to assign it where you want.

Also realize that initComponent is called after the static data in the component has been processed. I can’t tell where you are running that second block of code above. But you have to create that combo to use the store you created in initComponent after the store is created, i.e. after initComponent is called. You could do something like this in initComponent right after you create the store:

this.items = [{
    xtype: 'form',
    margin: 10,
    border: false,
    defaults: {allowBlank: false},
    items: [{
        xtype: 'combobox',
        fieldLabel: 'Log Month',
        store: Ext.StoreManager.lookup('months'),
        queryMode : 'local',
        displayField: 'month',
        valueField: 'id',
        listeners: {
            blur: function(field) {
                console.log(this.monthStore);
                console.log(this.x);
            }
        }
    }]
}];

Another thing I do if I have a reference store that could get use by multiple views is to create it in the controller. Then when I create an instance of a view I already have it available and I can just do the StoreManager.lookup call shown above.