Ext.grid.GroupingView 实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>groupingGrid.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css"/> <mce:script type="text/javascript" src="../ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../ext/ext-all.js" mce_src="ext/ext-all.js"></mce:script> <mce:script type="text/javascript"><!-- Ext.onReady(function(){ var reader=new Ext.data.ArrayReader({},[ {name:'webTechnology'}, {name:'reusability'}, {name:'speed_develope'}, {name:'maintainability'}, {name:'portability'}, {name:'security'}, {name:'costs_develop'}, {name:'data_call'}, {name:'scalability'}, {name:'oo'} ]); Ext.grid.dummyData=[ ['Java','高','慢','优','等','高','高','接口统一','优','优'], ['Java','高','快','优','优','低','高','接口统一','优','优'], ['Java','高','慢','优','等','高','高','接口统一','优','优'], ['Java','高','快','优','优','低','高','接口统一','优','优'], ['Java','高','慢','优','等','低','高','接口统一','优','优'], ['PHP','低','快','差','优','高','低','接口不统一','差','差'], ['PHP','低','快','优','优','高','低','接口不统一','差','差'], ['PHP','低','慢','优','优','低','低','接口不统一','差','差'], ['PHP','低','快','差','等','高','低','接口不统一','差','差'], ['PHP','低','慢','优','优','低','低','接口不统一','差','差'], ['PHP','低','慢','差','优','高','低','接口不统一','差','差'], ['PHP','低','快','差','等','低','低','接口不统一','差','差'] ]; var grid=new Ext.grid.GridPanel({ store:new Ext.data.GroupingStore({ reader:reader, data:Ext.grid.dummyData, sortInfo:{field:'oo',direction:'ASC'}, groupField:'webTechnology' }), columns:[ {id:'webTechnology',header:'技术名',width:50,dataIndex:'webTechnology',sortable:true}, {header:'可复用性',width:50,dataIndex:'reusability',sortable:true}, {header:'开发速度',width:50,dataIndex:'speed_develope',sortable:true}, {header:'易维护性',width:50,dataIndex:'maintainability',sortable:true}, {header:'可移植性',width:50,dataIndex:'portability',sortable:true}, {header:'安全性',width:50,dataIndex:'security',sortable:true}, {header:'开发费用',width:50,dataIndex:'costs_develop',sortable:true}, {header:'数据访问',width:50,dataIndex:'data_call',sortable:true}, {header:'可扩展性',width:50,dataIndex:'scalability',sortable:true}, {header:'面向对象',width:50,dataIndex:'oo',sortable:true} ], view:new Ext.grid.GroupingView({ forceFit:true, groupTextTpl:'{text}({[values.rs.length]} {[values.rs.length>1?"Items":"Item"]})' }), frame:true, width:800, height:400, collapsible:true, animCollapse:false, title:'Web 开发 技术比较', iconCls: 'icon-grid', applyTo:document.body }); }); // --></mce:script> </head> <body> </body> </html>
运行效果:
可以收缩组：
