ExtJs 4 comboboxes loading

Question

У меня есть комбобокс. Один из них содержит регионы, а другие - города. Я хочу, чтобы достичь wollowing поведения: когда какой-либо регион выбран в первом combobox, доступных городов во втором combobox также изменить.

Например, если я выбираю Region1 в первом поле со списком, то второе поле со списком будет содержать CityA и CityB. Если я выберу Регион 2, то второе поле со списком будет содержать CityD, CityE и CityF.

Я надеюсь, что это было довольно ясно :)

я пытался решить это сам, используя стиль закрытия, но мой код имеет вопрос: выпадающий остается маскируется даже тогда, когда все города загружены. Кто-нибудь знает, как решить эту проблему?

Города код выпадающий:

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; 

} 

Регионы код выпадающий:

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; 

} 

Взаимодействие Код:

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

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

Answer 1

Артём, взгляните на его пример, я думаю, что это именно то, что вам необходимо:

http://extjs.wima.co.uk/example/1

Answer 2

Элегантное решения было найдено в этой статье:

http://www.learnsomethings.com/2011/05/17/where-did-setextraparam-aka-setbaseparam-go-in-extjs-4-%E2%80%93-one-workaround/