你的位置:首页 > 软件开发 > Java > 动态改变gridpanel数据

动态改变gridpanel数据

发布时间:2012-03-13 17:00:11
场景:当选择上面的ComboBox时,下面的Gridpanel值重新绑定,pagingtoolbar也改变,,首次加载与选择combobox时的调用的数据源方法不一样;首次加载: //获取Store var cityStore = new Ext.data.Store({ proxy: new Ext.data.HttpPro ...

场景:当选择上面的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} });
    });

 

 

 

原标题:动态改变gridpanel数据

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录