Extjs 学习 --Ext.grid.GridPanel()（一）

Extjs学习二 --Ext.Button()

java Annotation

Extjs 学习 --Ext.grid.GridPanel()（一）

2012-04-27 10:11:21| 分类： Extjs | 标签：extjs |字号 订阅

表格空间必须包含列信息和数据存储器

ColumnModel:列信息，用来定义表格标题信息，同时包含排序功能
Store：数据存储器，负责定义表格中显示的数据，根据解析的数据不同，可以使用高级Store

//数据var data=[
["张三","男",19,"1991-01-01"],
["李四","女",20,"1992-02-02"],
["王武","男",21,"1988-05-30"],
["赵柳","女",22,"1989-05-21"] ];//简单的数据解析，存入仓库
var store=new Ext.data.SimpleStore({
data:data,
fields:[
{name:"name",type:"String"},
{name:"sex",type:"String"},
{name:"age",type:"int"},
{name:"bir",type:"String"}
]
});//渲染数据字体
function change(val){
return "<span style='color:red'>"+val+"</span>"
}//设置表格的选择模式为复习框
var sm=new Ext.grid.CheckboxSelectionModel();
var g=new Ext.grid.GridPanel({
title:"表格控件",
//声明表格中的标题
columns:[
//实现复选按钮的效果
sm,
//使用Extjs提供的排列序号
new Ext.grid.RowNumberer(),
{header:"姓名",dataIndex:"name",sortable:true}, //sortable:true，对该字段进行排序
//renderer可以对该字段的数据进行渲染，调用change函数
{header:"性别",dataIndex:"sex",renderer:change,sortable:true},
{header:"年龄",dataIndex:"age",sortable:true},
{header:"出生日期",dataIndex:"bir",sortable:true}
],
//设置现在表格的样式，RowSelectionModel({singleSelect:true})表示每次选择整行且单选
//sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
//sm:new Ext.grid.CellSelectionModel(),//每次选择一个单元格
//实现复习按钮
sm:sm,
//从数据存储中引入数据
store:store,
//将表格放入body中
renderTo:Ext.getBody(),
width:450,
//隔行换色
stripeRows:true,
autoHeight:true
});