ExtJs数据分组(GroupingView)
2016-06-22 16:45
477 查看
<script type="text/javascript"> function toHeader(arr){ var row = arr[0].json; if(row.STATES==1){ return '<img src=/images/addicon/tgaudit1.png height=13 width=13 /> 审核通过'; } } Ext.onReady(function() { var datas = [ [ 1, "张三", 24, "男", new Date(1986, 06, 09) ], [ 2, "李四", 30, "女", new Date(1980, 09, 13) ], [ 3, "王五", 28, "男", new Date(1982, 01, 10) ] ]; var person = Ext.data.Record.create([ { name : "PID", mapping : 0 }, { name : "ENTERPRISE_NAME", mapping : 1 } ]); var groupingStore = new Ext.data.GroupingStore({ reader : new Ext.data.JsonReader({ root : "list" }, [ { name : "PID" }, { name : "ENTERPRISE_NAME" }, { name : "PID1" }, { name : "WASTE_NAME" }, { name : "WASTE_CODE" }, { name : "WASTE_TYPE" } ]), autoLoad : false, //totalProperty: "total", proxy : new Ext.data.HttpProxy({ method : 'POST', url : '/test/searchZhunrudan.action' }), sortInfo : { field : "PID", direction : "ASC" }, //数据排序 groupField : "ENTERPRISE_NAME" //分组字段 }) var bbarPanel = new Ext.PagingToolbar({ pageSize : 20, store : groupingStore, displayInfo : true, displayMsg : '显示 {0} - {1} 条 / 共 {2} 条记录', emptyMsg : "没有记录" }) var grid = new Ext.grid.GridPanel({ title : "GroupingView实例", renderTo : Ext.getBody(), frame : false, height : 400, width : 800, border : true, flex : 1, tbar : [ { text : "展开/收缩", iconCls : "search", handler : function() { var view = grid.getView(); //var groupId = view.getGroupId("男"); //view.toggleGroup(groupId); view.toggleAllGroups(); } } ], store : groupingStore, view : new Ext.grid.GroupingView({ sortAscText : "升序", sortDescText : "降序", columnsText : "表格字段", groupByText : "使用当前字段进行分组", showGroupsText : "表格分组", groupTextTpl : "{text}(共{[values.rs.length]}条) {[toHeader(values.rs)]}" //格式化标题,values.rs是内置的变量 }), columns : [ { header : "编号", width : 50, dataIndex : "PID" }, { header : "企业名称", width : 200, dataIndex : "ENTERPRISE_NAME", renderer:function(v,r,c){ return v; } }, { header : "危废ID", width : 200, dataIndex : "PID1", hidden : true }, { header : "废物名称", width : 200, dataIndex : "WASTE_NAME" }, { header : "危废编码", width : 200, dataIndex : "WASTE_CODE" }, { header : "危废类型", width : 200, dataIndex : "WASTE_TYPE" } ], bbar : bbarPanel }); groupingStore.load({ params : { start : 0, limit : 20 } }); }); </script>
相关文章推荐
- extjs grid取到数据而不显示的解决
- ExtJS下grid的一些属性说明
- Extjs在exlipse中设置自动提示的方法
- 常用Extjs工具:Extjs.util.Format使用方法
- extjs DataReader、JsonReader、XmlReader的构造方法
- 学习ExtJS(一) 之基础前提
- extjs 为某个事件设置拦截器
- ExtJs 学习笔记基础篇 Ext组件的使用第1/2页
- Extjs列表详细信息窗口新建后自动加载解决方法
- Extjs grid添加一个图片状态或者按钮的方法
- Extjs学习笔记之四 工具栏和菜单
- extjs form textfield的隐藏方法
- ExtJS 2.0实用简明教程之应用ExtJS
- ExtJS Store的数据访问与更新问题
- 不用写JS也能使用EXTJS视频演示
- Extjs改变树节点的勾选状态点击按钮将复选框去掉
- extjs 列表框(multiselect)的动态添加列表项的方法
- ExtJs默认的字体大小改变的几种方法(自己整理)
- ExtJS 配置和表格控件使用第1/2页
- 解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题