how to access class variables from combo select listener- extjs 3.4

Question

I am creating a dependent combo for country,city and state here. I have a select listener in country combo,wherein I call loadCityCombo method.. But, I am not able to access cityStore from loadCityCombo.

What changes should I do for the dependent combo to work?

this.country = {
            store : this.countryStore,
            xtype: 'combo',
            fieldLabel : 'Country',
            displayField : 'country',
            valueField : 'country',
            name : 'country',
            typeAhead : true,
            mode : 'local',
            triggerAction : 'all',
            editable : false,
            forceSelection : true,
            allowBlank : false,
            emptyText : 'Select Country',
            listeners : {
                'select' : this.loadCityCombo
            }
        };

this.loadCityCombo = function(country) {
        console.log('load-CityCombo');
        console.log(country);

        var ctyCombo =  (that.mainFormPanel.getComponent('locationDetailsFieldSet')).getComponent('citycombo');
        console.log(ctyCombo);

        var that = this;
        if(country != null){
        var countryName = country.value;
        console.log(this.cityStore);
        console.log(that.cityStore);
        that.cityStore.reload({
            params : {
                country : countryName,start : 1,limit : 1
            }
        });
    }

};

Answer 1

I think you could be suffering from a scope issue, try adding

listeners : {
             'select' : this.loadCityCombo,
              scope: this
            }

You should be able to use the this keyword and not the 'that' variable you have defined

EDIT If not defined, this usually refers to the browser window.