Reputation: 643

ExtJs 4 comboboxes loading

I have to comboboxes. One of them contains regions and other contains cities. I want to achieve the wollowing behavior: when any region is selected in first combobox, avaliable cities in second combobox also change.

For example if I select Region1 in first combobox, then second combobox will contain CityA and CityB. If I select Region 2, second combobox will contain CityD, CityE and CityF.

I hope it was rather clear :)

I tried to solve it myself using closure style, but my code has an issue: combobox remains masked even when all cities are loaded. Does anyone know how to settle this problem?

Cities combobox code:

var setFilterRegion;
function getCityField() {

var citiesPerPage = 10;

var citiesProxy = Ext.create('Ext.data.proxy.Ajax', {
    url: 'service/cities-data.php',
    reader: Ext.create('Ext.data.reader.Json', {
        root: 'cities',
        totalProperty: 'totalCount'
    })
});

setFilterRegion = function(regionId) {
  citiesProxy.extraParams['region_id'] = regionId;
};

var cities = Ext.create('Ext.data.Store', {
    pageSize: citiesPerPage,
    model: 'City',
    proxy: citiesProxy,
    sorters: [{
        property: 'name',
        direction: 'ASC'
    }]
});

var citiesComboBox = Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Город',
    store: cities,
    displayField: 'name',
    valueField: 'id',
    listConfig: {
        loadingText: 'Загрузка...',
        emptyText: 'Нет городов с похожим названием'
    },
    pageSize: citiesPerPage,
    labelWidth: contactInfo.labelWidth,
    width: contactInfo.width
});

cities.loadPage(1);

return citiesComboBox;

}

Regions combobox code:

function getRegionField() {

var regionsPerPage = 10;

var regions = Ext.create('Ext.data.Store', {
    pageSize: regionsPerPage,
    model: 'Region',
    proxy: Ext.create('Ext.data.proxy.Ajax', {
        url: 'service/regions-data.php',
        reader: Ext.create('Ext.data.reader.Json', {
            root: 'regions',
            totalProperty: 'totalCount'
        })
    }),
    sorters: [{
        property: 'name',
        direction: 'ASC'
    }]
});

var regionsComboBox = Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Регион',
    store: regions,
    displayField: 'name',
    valueField: 'id',
    listConfig: {
        loadingText: 'Загрузка...',
        emptyText: 'Нет регионов с похожим названием'
    },
    pageSize: regionsPerPage,
    labelWidth: contactInfo.labelWidth,
    width: contactInfo.width
});

regions.loadPage(1);

return regionsComboBox;

}

Interaction code:

var regionField = getRegionField();
var cityField = getCityField();
var phoneField = getPhoneField();

regionField.on('change', function(t, newVal){
    setFilterRegion(newVal);
    cityField.getStore().loadPage(1);
});

Upvotes: 0