zoukankan      html  css  js  c++  java
  • 动态改变gridpanel数据

    场景:当选择上面的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', 200, align: 'center' },
            { id: 'city_name', header: '名称', dataIndex: 'CityName', 200, align: 'center' },
            { header: '拼音', dataIndex: 'CityPinYin', 200, align: 'center' },
            { header: '省份', dataIndex: 'ProvinceName', 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({
            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} });
        });

  • 相关阅读:
    服务端获取实际IP工具类
    vue-element-admin整合服务端代理api
    elemengui分页
    vue获取浏览器地址栏参数
    el-table-column动态判断显示性别男女
    nginx代理静态页面添加二级目录
    nginx配置代理指向Redis
    SpringBoot整合Redis日志反复提示Redis重连问题
    centos7安装Redis
    nohup启动jar包
  • 原文地址:https://www.cnblogs.com/KimhillZhang/p/2394100.html
Copyright © 2011-2022 走看看