通过下拉菜单筛选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: "汇报人", width: 80, dataIndex: 'HBR'},  

                    {header: "汇报时间", width: 100, dataIndex: 'HBSJ'},  

                    {header: "汇报阶段", width: 150, dataIndex: 'JDMC'}  

                ]  

            }),  

            viewConfig: {  

                forceFit:true  

            },   

            columnLines: true,         

            width: 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',  

                    width: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'  

                 }  

                ]  

            })  

你可能感兴趣的:(gridPanel)