这里实现的是一个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' } ] })