Extjs学习总结之19表格组件gridpanel

我们看过了很多组件了吧，还没有见识过extjs的表格是如何做的。现在就让我们见识一下。

 

gridpanel.js:

Ext.onReady(function(){/* * Ext.grid.GridPanel其实就是一个panel，Ext.panel是它的父类， * 在面板上放置表格数据就成了GridPanel. *  * 从外观上看，表格分为：表头，数据行，分页栏。分页这里不去考虑。主要看表头和数据行。 * 表头为表格列提供一系列的信息，包含了列的说明，列的宽度，是否可以改变大小值， * 是否可以排序，是否出现菜单等数据。表头由列模型Ext.grid.ColumnModel定义， * 是Ext.util.Observable的子类，所以列模型也会出发相应的事件，列模型通常会 * 包含若干个列的信息，每一列的信息保存在JSON结构中，一个列的配置选项有很多。 *//*加强版的列模型*/  //定义列模型 dataIndex表示记录结构中name的属性值//var cm = new Ext.grid.ColumnModel([//{header:"姓名",width:80,dataIndex:"Name",tooltip:"这是您的姓名"},//{header:"性别",width:40,dataIndex:"Sex",align:"center"},//{header:"生日",width:150,format:"Y-m-d",dataIndex:"Birthday"},//{header:"学历",width:80,dataIndex:"Education",align:"center"},//{id:"memo",header:"备注",dataIndex:"Memo"}//]);///***************加强版的列模型********************/var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),{header:"姓名",width:80,dataIndex:"Name",tooltip:"这是您的姓名"},{header:"性别",width:40,dataIndex:"Sex",align:"center",renderer:function(v){if(v == "男"){return "♂";}else{return "♀";}}},{header:"生日",width:100,format:"Y-m-d",dataIndex:"Birthday",renderer:Ext.util.Format.dateRenderer("Y-m-d")},{header:"学历",width:80,dataIndex:"Education",align:"center"},{id:"memo",header:"备注",dataIndex:"Memo"},{header:"操作",width:150,dataIndex:'',menuDisabled:true,renderer:function(v){return "<span style='margin-right:10px'><a href='#'>修改</a></span><span><a href='#'>删除</a></span>"}}]);//new Ext.grid.RowNumberer.prototype={//header:"",//width:23,//sortable:false,//fixed:true,//menuDisabled:true,//dataIndex:'',//id:'numberer',//rowspan:undefined,//renderer:function(v,p,record,rowIndex){//if(this.rowspan){//p.cellAttr = 'rowspan ="'+his.rowspan+"" ;//}//return rowIndex+1;//}//};/**********************************************///创建DataProxy,DataReader和Store对 store对象和GridPanel绑定 GrilPanel就能显示数据var data = [{name:"吕鹏",sex:"男",birthday:Date.parseDate("1990-03-10","Y-m-d"),edu:"本科",memo:"无备注"},{name:"代红",sex:"女",birthday:Date.parseDate("1990-03-10","Y-m-d"),edu:"专科",memo:"无备注"},{name:"涛涛",sex:"男",birthday:Date.parseDate("1990-03-10","Y-m-d"),edu:"专科",memo:"无备注"},{name:"振振",sex:"女",birthday:Date.parseDate("1990-03-10","Y-m-d"),edu:"专科",memo:"无备注"}];//Proxyvar proxy = new Ext.data.MemoryProxy(data);//Record 定义记录的结果var Human = Ext.data.Record.create([{name:"Name",type:"string",mapping:"name"},{name:"Sex",type:"string",mapping:"sex"},{name:"Birthday",type:"string",mapping:"birthday"},{name:"Education",type:"string",mapping:"edu"},{name:"Memo",type:"string",mapping:"memo"}]);//Readervar reader = new Ext.data.JsonReader({},Human);//Store  列模型中的dataIndex必须和Human结构中的name属性保持一致var store = new Ext.data.Store({proxy:proxy,reader:reader});store.load();//现在，列模型和数据都准备好了，将这些数据作为GridPanel的选项配置传递到//GridPanel的构造方法中，并适当的设置外观参数，效果就出来了。、var grid = new Ext.grid.GridPanel({title:"中国四有青年模范代表",width:600,autoHeight:true,cm:cm,store:store,renderTo:"a",antuExpandColumn:"memo" //自由伸缩 占满剩余区域});//});