我们看过了很多组件了吧,还没有见识过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:"无备注"}
];
//Proxy
var 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"}
]);
//Reader
var 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" //自由伸缩 占满剩余区域
});
//
});