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>

执行结果:








你可能感兴趣的:(extjs4)