ExtJs学习资料26-Ext.data.GroupingStore数据表格按组显示操作.doc
ExtJs学习资料Ext.data.GroupingStore数据表格按组显示操作2021年5月8日星期六1、引入ExtJs框架文件（存入Global.js文件中）document.write("<link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css"/> ");document.write("<script type="text/javascript" src="./extjs/adapter/ext/ext-base.js"></script>");document.write("<script type="text/javascript" src="./extjs/ext-all.js"></script>");document.write("<script type="text/javascript" src="./extjs/ext-lang-zh_CN.js"></script>");2、引入Global.js文件<script type="text/javascript" src="Global.js"></script>3、效果图=4、JS源代码<script type="text/javascript">Ext.onReady(function()/-开始->/=将数值转为货币形式=function float_money(cellValue) return (Ext.util.Format.usMoney(cellValue); /=/*jsonDataInfo.asp源文件:<%LANGUAGE="VBSCRIPT" CODEPAGE="65001"%><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><%response.Clear()%>success:true,total:4,rows:id:1,title:"OfficeSpace1",director:"MikeJudge1",released:"1999-02-19",genre:1,tagline:"Work Sucks1",price:19.05,active:1,id:2,title:"OfficeSpace2",director:"MikeJudge2",released:"1999-02-19",genre:1,tagline:"Work Sucks2",price:29.05,active:1,id:3,title:"OfficeSpace3",director:"MikeJudge3",released:"1999-02-19",genre:2,tagline:"Work Sucks3",price:39.05,active:1,id:4,title:"Office Space4",director:"Mike Judge4",released:"1999-02-19",genre:2,tagline:"Work Sucks4",price:49.05,active:1*/var _store=new Ext.data.GroupingStore(proxy:new Ext.data.HttpProxy( url:"jsonDataInfo.asp", /请求数据的URL地址method:"POST" /请求方式GET和POST),reader:new Ext.data.JsonReader( /解析数据格式id:"id",/id:一个数据行对象的属性名，它包含数据行的id值/totalProperty:从其中可以获得数据集记录的总大小。 /当整个数据集不是一次性返回，而是在服务器端做好分页时，才需要此参数totalProperty:"total",successProperty:"success",/successProperty:从其中可以获得供表单使用的success参数root:"rows"/root:它包含数据行数组,Ext.data.Record.create("id","title","director",name:"released",type:"date",dateFormat:"Y-m-d","genre","tagline",name:"price",type:"float",name:"active",type:"bool"),sortInfo: field:"director",direction:"ASC" , /排序方式设置groupField:"director", /对store中数据进行分组所依据的字段名称(默认值为)autoLoad:true /如果传入此值，store将在被创建后使用autoLoad对象作为参数自动调用load方法);var _grid=new Ext.grid.GridPanel(title:"实现读取服务器端JSON数据并分组显示", width:600, height:280, frame:true, renderTo:Ext.getBody(),/*viewConfig: forceFit:true, autoFill:true ,*/store:_store,columns:header:"序号",dataIndex:"id",width:80,sortable:true,header:"标题",dataIndex:"title",id:"title",width:120,header:"导演",dataIndex:"director",align:"center",header:"放映日期",dataIndex:"released",renderer:Ext.util.Format.dateRenderer("Y-m-d"),header:"语种",dataIndex:"tagline",header:"票价",dataIndex:"price",renderer:float_money,view:new Ext.grid.GroupingView(/grid中的Ext.grid.GridView 对象. 这个可以在调用render()之前设置forceFit:true,autoFill:true),autoExpandColumn:"title" /grid中列的id,改列将会扩展宽度以致填满剩余空间.这个列id不能为0.);/-结束->);</script>第 2 页 / 共 2 页
