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

来源：互联网发布：excel数据图表插件编辑：程序博客网时间：2024/04/29 14:19

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  });