ExtJs 4 组合框加载

Question

我必须组合框。其中之一包含地区，其他包含城市。我想实现以下行为：当在第一个组合框中选择任何区域时，第二个组合框中的可用城市也会发生变化。

例如，如果我在第一个组合框中选择 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 /