EXTJS4自学手册——页面控件（表格）
grid控件是EXTJS中非常常用的组件，用于生成表格
一、最简单的表格：
例子：
<script type="text/javascript">
<!--在页面加载完成后调用JS代码-->
Ext.onReady(function(){
Ext.create('Ext.grid.Panel',{
renderTo:'myGrid',
title:'简单的表格',
//要展示的数据
store:Ext.create('Ext.data.ArrayStore',{
//数据结构
fields:['id','name','age'],
//数据内容
data:[[1,'aaa',23],[2,'bbb',47]]
}),
columns:[{
//列标题名称
text:'id',
//绑定数据容器的字段
dataIndex:'id'
},{
//列标题名称
text:'名称',
//绑定数据容器的字段
dataIndex:'name'
},{
//列标题名称
text:'年龄',
//绑定数据容器的字段
dataIndex:'age'
}]
})
});
</script>
</head>
<body>
<div id = 'myGrid'>
</div>
</body>
执行结果：
二、通过selType属性设置表格的数据选择方式是行选择（默认）还是元素选择
rowmodel:行选择
例子：
<script type="text/javascript">
<!--在页面加载完成后调用JS代码-->
Ext.onReady(function(){
Ext.create('Ext.grid.Panel',{
renderTo:'myGrid',
title:'简单的表格',
//行选择模式
selType: 'rowmodel',
//要展示的数据
store:Ext.create('Ext.data.ArrayStore',{
//数据结构
fields:['id','name','age'],
//数据内容
data:[[1,'aaa',23],[2,'bbb',47]]
}),
columns:[{
//列标题名称
text:'id',
//绑定数据容器的字段
dataIndex:'id'
},{
//列标题名称
text:'名称',
//绑定数据容器的字段
dataIndex:'name'
},{
//列标题名称
text:'年龄',
//绑定数据容器的字段
dataIndex:'age'
}]
})
});
</script>
执行结果：
cellmodel：元素选择模式
<script type="text/javascript">
<!--在页面加载完成后调用JS代码-->
Ext.onReady(function(){
Ext.create('Ext.grid.Panel',{
renderTo:'myGrid',
title:'简单的表格',
//元素选择模式
selType: 'cellmodel',
//要展示的数据
store:Ext.create('Ext.data.ArrayStore',{
//数据结构
fields:['id','name','age'],
//数据内容
data:[[1,'aaa',23],[2,'bbb',47]]
}),
columns:[{
//列标题名称
text:'id',
//绑定数据容器的字段
dataIndex:'id'
},{
//列标题名称
text:'名称',
//绑定数据容器的字段
dataIndex:'name'
},{
//列标题名称
text:'年龄',
//绑定数据容器的字段
dataIndex:'age'
}]
})
});
</script>
执行结果：
三、表格的列类型：
说明：列类型包括：
序号、默认（正常显示）、模板列、逻辑判断列、日期列、数值列、行为列
例子：
<script type="text/javascript">
<!--在页面加载完成后调用JS代码-->
Ext.onReady(function(){
Ext.create('Ext.grid.Panel',{
renderTo:'myGrid',
title:'表格列类型展示',
//要展示的数据
store:Ext.create('Ext.data.ArrayStore',{
//数据结构
fields:[{
name:'name',type:'string'
},{
name:'address',type:'string'
},{
name:'isStudent',type:'boolean'
},{
name:'birthday',type:'date'
},{
name:'money',type:'int'
}],
//数据内容
data:[['张三','重庆','true','2012-8-2',2223],['李四','北京','false','1541-9-6',4311]]
}),
//在每一列的前面加一个单选框
selModel:Ext.create('Ext.selection.CheckboxModel'),
columns:[
Ext.create('Ext.grid.RowNumberer'),//索引列
{ //默认列类型
text:'名称',
dataIndex:'name'
},{
//模板列
xtype:'templatecolumn',
text:'籍贯',
//模板
tpl:'{name}是{address}人'
},{
//逻辑判断列
xtype:'booleancolumn',
text:'是否学生',
dataIndex:'isStudent',
//当数据为真的时候，显示的内容
trueText:'是',
//当数据为假的时候，显示的内容
falseText:'否'
},{
//日期列
xtype:'datecolumn',
text:'出生日期',
dataIndex:'birthday',
format:'Y/m/d'
},{
//数值列
xtype:'numbercolumn',
text:'收入',
dataIndex:'money',
//渲染内容
renderer: Ext.util.Format.usMoney
},{
xtype:'actioncolumn',header:'行为列',items:[{
icon:'ext-4.0.7-gpl/ext-4.0.7-gpl/resources/themes/images/access/dd/drop-add.gif',
tooltip:'行为',
handler:function(){}//自定义的行为
}]
}]
})
});
</script>
执行结果：
