ExtJS4组合框加载

我得买些组合框。其中一个包含区域，另一个包含城市。我想实现wollowing行为：当在第一个组合框中选择任何区域时，第二个组合框中的可用城市也会发生变化

例如，如果我在第一个组合框中选择Region1，那么第二个组合框将包含CityA和CityB。如果我选择区域2，第二个组合框将包含CityD、CityE和CityF

我希望这是相当清楚的：）

我试图用闭包风格自己解决这个问题，但我的代码有一个问题：即使所有城市都被加载，combobox仍然被屏蔽。有人知道如何解决这个问题吗

城市组合框代码：

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 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);
});

---

看一看他的例子，我认为这正是你需要的：

---

在本文中找到了优雅的解决方案：

---

我尝试了这种方法，但在加载城市数据后combobox仍然被屏蔽：（加载数据时是否出现错误？能否创建一个JS小提琴，我们可以查看一下。将存储更改为从简单的JSON数组读取数据。解决方案已在此处找到：真正的artem请站起来好吗