ExtJs 4 comboboxes loading

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/