场景:当选择上面的ComboBox时,下面的Gridpanel值重新绑定,pagingtoolbar也改变,,首次加载与选择combobox时的调用的数据源方法不一样;
首次加载:
//获取Store
var cityStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/ProvinceCity/GetCityList?c=' + new Date(),
method: 'POST'
}),
reader: new Ext.data.JsonReader({ root: 'city', totalProperty: 'total' }, record)
});
var bBar = new Ext.PagingToolbar({
pageSize: 10,
store: cityStore,
displayInfo: true,
displayMsg: '显示 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: '没有记录'
});
var cm = new Ext.grid.ColumnModel([
{ header: '编号', dataIndex: 'CityID', width: 200, align: 'center' },
{ id: 'city_name', header: '名称', dataIndex: 'CityName', width: 200, align: 'center' },
{ header: '拼音', dataIndex: 'CityPinYin', width: 200, align: 'center' },
{ header: '省份', dataIndex: 'ProvinceName', width: 200, align: 'center' }
]);
var citygrid = new Ext.grid.GridPanel({
id: 'city-grid',
border: false,
height: 300,
layout: 'fit',
autoExpandColumn: 'city_name',
stripeRows: true,
store: cityStore,
bbar: bBar,
cm: cm
});
当选择combobox时:
var proCombox = new Ext.form.ComboBox({
width: 120,
emptyText: '请选择...',
store: proStore,
mode: 'local',
readOnly: true,
valueField: 'ProvinceID',
displayField: 'ProvinceName',
typeAhead: true,
triggerAction: 'all'
});
//选择下拉框重新加载对应的数据到gridpanel
proCombox.on('select', function (comboBox) {
cityStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/ProvinceCity/GetCityListByProID?c=' + new Date(),
method: 'POST'
}),
reader: new Ext.data.JsonReader({ root: 'city', totalProperty: 'total' }, record),
baseParams: { provinceID: comboBox.getValue() }
});
citygrid.getBottomToolbar().bind(cityStore);//重新绑定分页
citygrid.reconfigure(cityStore, cm);//重新绑定gridpanel
cityStore.load({ params: { start: 0, limit: 10} });
});