ExtJs表格控件Grid的使用
2012-05-26 12:20 316 0
EXT中的表格功能非常强大，包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等使用功能。
我们首先介绍如何制作一个简单的Grid。
1、创建表格的列信息：
var cm=new Ext.grid.ColumnModel(\[
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'desn'}
\]);
2、添加数据信息：
var data=\[
\['1','name1','desn1'\],
\['2','name1','desn1'\],
\['3','name1','desn1'\],
\['4','name1','desn1'\],
\['5','name1','desn1'\]
\];
3、创建数据存储对象：
var ds=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},\[
{name:'id'},
{name:'name'},
{name:'desn'}
\])
});
ds.load();//这个相当的重要
4、表格的列模型定义好了，原始数据和数据的转换也已经完成，剩下的只需要把它们装配在一起，我们的Grid就创建成功了。
var grid=new Ext.grid.GridPanel({
renderTo:"grid",
store: ds,
height:600,
cm:cm
});
下面介绍三种ExtJs中最常见的表格控件:GridPanel,EditorGridPanel,PropertyGrid.
1.创建普通的Grid表格
/**
创建普通的Grid表格
*/
function createGridPanel(){
var myData = \[//以数组的形式定义数据
\['3m Co',71.72,0.02,0.03,'9/1 12:00am','www.baidu.com'\],
\['Alcoa Inc',29.01,0.42,1.47,'10/1 12:00am','www.163.com'\],
\['Boeing Co.',75.43,0.53,0.71,'9/2 12:00am','www.sina.com.cn'\],
\['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am','www.iteye.com'\],
\['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'8/30 12:00am','www.oracle.com'\]
\];
var myStore = new Ext.data.ArrayStore({//定义用于存放数据的store,并且为每个字段取名
data: myData,//把数据绑定到store
fields: \[//为每列取名,并且设置数据类型
{name: 'name'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
'url'
\]
}) ;
var myGrid = new Ext.grid.GridPanel({//定义列表
store: myStore,//把定义好的store绑定到此列表
columns: \[//根据在store中定义的列名,把列数据绑定到相应的列表头
{header: '姓名', width: 200, sortable: true, dataIndex: 'name'},//dataIndex:store中定义的fieldname.
{header: '价格', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},//renderer: Ext.util.Format.usMoney,显示美元的货币符号
{header: '改变', renderer:function(v){
if(v<=0){
return "<font color='red'>"+v+"</font>" ;
}else{
return v ;
}
}, dataIndex: 'change'},
{header: '改变百分比', dataIndex: 'pctChange'},
{
header: '最后改变时间', width: 135, dataIndex: 'lastChange',
xtype: 'datecolumn', format: 'Y-m-d'http://显示日期型变量的格式
},
{header: '网址', renderer: function(v){
return v.link(v) ;//渲染成超链接形式
}, dataIndex: 'url'}\]
}) ;
new Ext.Viewport({layout:'fit',items:myGrid}) ;//充满整个body显示列表
}
2.创建可编辑的Grid表格
/**
创建可编辑的Grid表格
注意:EditorGrid与Grid的区别在于,在要想设置成可编辑的列中定义如下属性editor: Ext.form.TextField(DateField)
*/
function createEditorGridPanel(){
var myData = \[//以数组的形式定义数据
\['3m Co',71.72,0.02,0.03,new Date(),'www.baidu.com'\],
\['Alcoa Inc',29.01,0.42,1.47,new Date(),'www.163.com'\],
\['Boeing Co.',75.43,0.53,0.71,new Date(),'www.sina.com.cn'\],
\['Hewlett-Packard Co.',36.53,-0.03,-0.08,new Date(),'www.iteye.com'\],
\['Wal-Mart Stores, Inc.',45.45,0.73,1.63,new Date(),'www.oracle.com'\]
\];
var myStore = new Ext.data.ArrayStore({//定义用于存放数据的store,并且为每个字段取名
data: myData,//把数据绑定到store
fields: \[//为每列取名,并且设置数据类型
{name: 'name'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date'},
'url'
\]
}) ;
var myGrid = new Ext.grid.EditorGridPanel({//定义列表
store: myStore,//把定义好的store绑定到此列表
columns: \[//根据在store中定义的列名,把列数据绑定到相应的列表头
{header: '姓名', width: 200, sortable: true,editor: Ext.form.TextField, dataIndex: 'name'},//dataIndex:store中定义的fieldname.
{header: '价格', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},//renderer: Ext.util.Format.usMoney,显示美元的货币符号
{header: '改变', renderer:function(v){
if(v<=0){
return "<font color='red'>"+v+"</font>" ;
}else{
return v ;
}
}, dataIndex: 'change'},
{header: '改变百分比', dataIndex: 'pctChange'},
{
header: '最后改变时间', width: 135, dataIndex: 'lastChange',editor: Ext.form.DateField,//此字段可以编辑
xtype: 'datecolumn', format: 'Y-m-d H:i:s'http://显示日期型变量的格式
},
{header: '网址', renderer: function(v){
return v.link(v) ;//渲染成超链接形式
}, dataIndex: 'url'}\]
}) ;
new Ext.Viewport({layout:'fit',items:myGrid}) ;//充满整个body显示列表
}
3.创建Property(Key-value)的Grid表格
/**
创建Property(Key-value)的Grid表格
下在source中定义的是name及对应的value(默认值),在页面的列表中可以对value进行编辑修改
*/
function createPropertyGridPanel(){
var grid = new Ext.grid.PropertyGrid({
title: 'Properties Grid',
autoHeight: true,
width: 300,
source: {
"(name)": "My Object",
"Created": new Date(),
"Available": false,
"Version": .01,
"Description": "A test object"
}
});
new Ext.Viewport({layout:'fit',items:grid}) ;//充满整个body显示列表
}
4.载入相应的列表
/**
载入相应的列表
*/
//Ext.onReady(createGridPanel);
//Ext.onReady(createEditorGridPanel);
Ext.onReady(createPropertyGridPanel);
