EXT JS combobox not reload data

Question

Hi guys! Ive got a problem - in my grid I linked two combobox (country and town) . I am choosing country and correctly get all towns(JSON), but on next change country combobox my town combobox not reload. What im doing wrong? Here my code

Ext.onReady(function(){
Ext.QuickTips.init();

var Organization = Ext.data.Record.create([{
    name: 'name_ru',
    type: 'string'
}, {
    name: 'name_en',
    type: 'string'
}, {
    name: 'type',
    type: 'string'
},{
    name: 'country',
    type: 'string'
},{
    name: 'town',
    type: 'string'
}]);

var Town = Ext.data.Record.create([{
    name: 'id',
    type: 'integer'
}, {
    name: 'name',
    type: 'string'
}]);

Ext.namespace("Ext.ux");
Ext.ux.comboBoxRenderer = function(combo) {
  return function(value) {
    var idx = combo.store.find(combo.valueField, value);
    var rec = combo.store.getAt(idx);
    return rec.get(combo.displayField);
  };
} 

var proxy1 = new Ext.data.HttpProxy({
    url: 'emp2.php'
});

var writer = new Ext.data.JsonWriter({
    encode: true // В документации сказано если вы будете использовать rest то этот флаг нужно выставить в false
});

var store4 = new Ext.data.GroupingStore({
    proxy: proxy1,
    reader: new Ext.data.JsonReader({root: 'org',totalProperty: 6, id: 'name_ru'},[{name: 'name_ru'},
                                                                                {name: 'name_en'},
                                                                                {name: 'type'},
                                                                                {name: 'country'},
                                                                                {name: 'town'}]),
    writer:writer,
//  restful: true,      
    root: 'emp',
    sortInfo: {field: 'name_ru', direction: 'ASC'}
});

getData = function(_req,_forVal)
{
    var myStore = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: 'include/getRFB.php?'+_req+'='+_forVal,
            method: 'POST',
        totalProperty: 6
        }),
        reader: new Ext.data.JsonReader({
            id: 'id',
            root:'town'
        },[
            {name: 'id', mapping: 'id'},
            {name: 'name', mapping: 'name'}
        ]),
        remoteSort: true
    });
//  Ext.Msg.alert('Hello this is the title', myStore);
    myStore.load();
    return myStore;
}

var townStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
        url: 'include/getRFB.php?test=true',
        method: 'POST'
    }),
    reader: new Ext.data.JsonReader({
        id: 'id',
        root:'test',
        totalProperty: 6
    },[
        {name: 'id', mapping: 'id'},
        {name: 'name', mapping: 'name'}
    ]),
    remoteSort: true
});



var countryStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
        url: 'include/getRFB.php?country=true',
        method: 'POST'
    }),
    reader: new Ext.data.JsonReader({
        id: 'id',
        root:'country',
        totalProperty: 6
    },[
        {name: 'id', mapping: 'id'},
        {name: 'name', mapping: 'name'},
        {name: 'alpha2', mapping: 'alpha2'},
        {name: 'alpha3', mapping: 'alpha3'},
        {name: 'iso', mapping: 'iso'}
    ]),
    remoteSort: true
});

var orgTypeStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
        url: 'include/getRFB.php?orgtype=true',
        method: 'POST'
    }),
    reader: new Ext.data.JsonReader({
        id: 'id',
        root:'org_type',
        totalProperty: 6
    },[
        {name: 'id', mapping: 'id'},
        {name: 'name', mapping: 'name'}
    ]),
    remoteSort: true
});

var comboTown = new Ext.form.ComboBox({
    store:townStore,
    fieldLabel: 'Town',
    displayField: 'name',
    valueField: 'id',
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all',

    name : 'town1',


    id : 'town1',
    emptyText : 'Выберите город...',
    hiddenName : 'town_name',
    width : 250,
    anchor:'-50'
});

var combo1 = new Ext.form.ComboBox({
    store:countryStore,
    fieldLabel: 'Country',
    displayField: 'name',
    valueField: 'id',
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all',



    name : 'country1',
    id : 'country1',
    emptyText : 'Выберите страну...',
    hiddenName : 'country_name',
    width : 250,
    anchor:'-50',
    listeners : { 
        select: function(f,r,i){ 
            // f=formfield r=data rec of selected combo item i=index num of clicked item 
            _forVal = this.getValue(); //get selected value of this comboBox
            //comboTown.store.clearFilter();
            comboTown.store =getData('countryT',_forVal); //call function tht load store
            comboTown.displayField = 'name';
            comboTown.reset();


        }
    }
});

var comboOrgType = new Ext.form.ComboBox({
    store:orgTypeStore,
    fieldLabel: 'Name',
    displayField: 'name',
    valueField: 'id',
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all',
    selectOnFocus: true,
    name : 'orgtype1',
    id : 'orgtype1',
    allowBlank : false,
    emptyText : 'Выберите тип...',
    hiddenName : 'name',
    width : 250,
    anchor:'-50'
});

countryStore.load();
orgTypeStore.load();
townStore.load();

var editor = new Ext.ux.grid.RowEditor({
    saveText: 'Обновить'
});

store4.load();

var grid = new Ext.grid.GridPanel({
    store: store4,
    width: 600,
    region:'center',
    margins: '0 5 5 5',
    autoExpandColumn: 'name',
    plugins: [editor],

    view: new Ext.grid.GroupingView({
        markDirty: false
    }),
    tbar: [{
        iconCls: 'icon-user-add',
        text: 'Добавить организацию',
        handler: function(){
            var e = new Organization({
                name_ru: 'Наименование организации ру',
                name_en: 'Наименование организации анг',
                type: '1',
                country: '2',
                town: '2'
            });
            editor.stopEditing();
            store4.insert(0, e);
            grid.getView().refresh();
            grid.getSelectionModel().selectRow(0);
            editor.startEditing(0);
        }
    },{
        ref: '../removeBtn',
        iconCls: 'icon-user-delete',
        text: 'Удалить организацию',
        disabled: true,
        handler: function(){
            editor.stopEditing();
            var s = grid.getSelectionModel().getSelections();
            for(var i = 0, r; r = s[i]; i++){
                store4.remove(r);
            }
        }
    }],

    columns: [
    new Ext.grid.RowNumberer(),
    {
        id: 'name',
        header: 'Название организации(рус)',
        dataIndex: 'name_ru',
        width: 200,
        sortable: true,
        editor: {
            xtype: 'textfield',
            allowBlank: false
        }
    },{
        header: 'Название организации(eng)',
        dataIndex: 'name_en',
        width: 195,
        sortable: true,
        editor: {
            xtype: 'textfield',
            allowBlank: false,
        }
    },{
        header: 'Тип',
        dataIndex: 'type',
        width: 85,
        sortable: true,
        editor: comboOrgType,
        renderer: Ext.ux.comboBoxRenderer(comboOrgType)
    },{
        header: 'Страна',
        dataIndex: 'country',
        width: 90,
        sortable: true,
        editor: combo1,
        renderer: Ext.ux.comboBoxRenderer(combo1)
    },{
        header: 'Город',
        dataIndex: 'town',
        width: 90,
        sortable: true,
        editor: comboTown,
        renderer: Ext.ux.comboBoxRenderer(comboTown)
    }]
});

//Ext.Msg.alert('Hello this is the title', store4.getCount());

var layout = new Ext.Panel({
    title: 'Список организаций',
    layout: 'border',
    layoutConfig: {
        columns: 1
    },
    width:720,
    height: 600,
    items: [grid]
});
layout.render(Ext.get('editor-grid'));

grid.getSelectionModel().on('selectionchange', function(sm){
    grid.removeBtn.setDisabled(sm.getCount() < 1);
});

});

Thanks!

Answer 1

I'll give it a shot :)

In your select-listener in combo1 (country) you set the store using the getData(...) method. The getData(...) method creates a new store which is loaded and then returned. I remember having some similar problems once and the solution might have been to first assign the store to the combobox and then load the store.

As far as I can see, you use getData(...) just to create a new store for the town combo. Why not just update the parameters of the town store and then reload it?

Hope it helps :)

Answer 2

Okey I throw it and do all from here - http://www.sencha.com/learn/Ext_FAQ_ComboBox#linked_comboBoxes And it works. Its all what i need.