通过下拉菜单筛选GridPanel的数据【转】

这里实现的是一个GridPanle页面,初始显示为全部的数据,在tbar里有一个下拉菜单,菜单里的选项可以对全部的数据进行筛选显示。

代码(页面引用EXTJS代码和JS文件头部Ext.onReady(function(){xx}))代码就不写了,XX如下:

    var reader = new Ext.data.JsonReader({}, [  
           {name: 'HBR'},  
           {name: 'LRSJ', type: 'date'},  
           {name: 'JDMC'},  
           {name: 'HBNR'}  
        ]);  
        var expander = new Ext.ux.grid.RowExpander({  
            tpl : new Ext.Template(  
                '<p style="height:auto"><b>汇报内容:</b><br>  {HBNR}</p>'  
            )  
        });  
      
        var grid1 = new Ext.grid.GridPanel({  
            //数据源  
            store: new Ext.data.JsonStore({  
                url: 'xxxx.aspx',  
                baseParams :{action:'getData'},  
                root: 'data',  
                autoLoad:true,  
                fields: ['HBR','LRSJ','HBNR','JDMC'],  
                reader: reader  
            }),  
            cm: new Ext.grid.ColumnModel({  
                columns: [  
                    expander,  
                    {header: "汇报人",  80, dataIndex: 'HBR'},  
                    {header: "汇报时间",  100, dataIndex: 'HBSJ'},  
                    {header: "汇报阶段",  150, dataIndex: 'JDMC'}  
                ]  
            }),  
            viewConfig: {  
                forceFit:true  
            },   
            columnLines: true,         
             500,  
            height: 565,  
            plugins: expander,  
            collapsible: false,//列表能否收缩  
             animCollapse: false,  
            iconCls: 'icon-grid',  
            renderTo: document.body,  
           //tbar工具栏   
            tbar:new Ext.Toolbar({  
                enableOverflow: true,  
                buttons: [  
                 {  
                    xtype:'combo',  
                    fieldLabel: '阶段名称',  
                    id:'JD',  
                    130,  
                    typeAhead: true,  
                    triggerAction: 'all',  
                    editable:false,  
                    lazyRender:true,  
                    mode: 'local',  
                    emptyText: '请选择阶段名称...',   
                    //通过后台获得所需要参数的值  
                    store: new Ext.data.JsonStore({  
                        url: 'xxx.aspx?action=getJDMC,  
                        root: 'data',  
                        autoLoad:true,  
                        fields: ['JDMC'],  
                    //向数据源中添加一项全部显示  
                        listeners:{  
                            'load':function(st,records){  
                                st.insert(0,[new Ext.data.Record({JDMC:"全部"})]);  
                            }  
                        }  
                    }),  
                    //为下拉菜单添加事件,启动时重新加载数据  
                    listeners : {  
                       'select':function(BMList,record){  
                        var myStore= grid1.getStore();  
                        myStore.setBaseParam('JDMC', record.get('JDMC'));  
                        myStore.reload();  
                        }  
                          
                    },  
                    valueField: 'JDMC',  
                    displayField: 'JDMC'  
                 }  
                ]  
            })  
原文地址:https://www.cnblogs.com/lxiang/p/2487103.html