一、 功能:排序、拖动、隐藏某一列、自动显示行号、单元格编辑等。
二、由类Ext.grid.GridPanel定义,继承自Panel,xtype为grid,列信息由类Ext.grid.ColumnModel定义,数据存储由Ext.data.Store定义。数据存储器根据解析的数据部同分为JsonStore、SimpleStore、GroupingStore等。
一个简单的使用表格控件的例子:
function ShowUrl(value){ alert(value); }; Ext.onReady(function(){ //定义一个数组 var data = [ [1,'标题1','内容1','详细内容1'], [2,'标题2','内容2','详细内容2'], [3,'标题3','内容3','详细内容3'] ];
//定义个数据存储器(必须) var store = new Ext.data.SimpleStore({
data:data,
fields:["id","title","content","url"]
});
//定义列信息(必须) var colM = new Ext.grid.ColumnModel( { header:"ID",dataIndex:"id",sortable:true }, { header:"标题",dataIndex:"title",sortable:true }, { header:"内容",dataIndex:"content",sortable:true }, { header:"链接",dataIndex:"url",sortable:true,renderer:ShowUrl});
//创建一个GridPanel var grid = Ext.grid.GridPanel({ title:"测试标题", height:150, width:600, cm:colM, store:store, autoExpandColumn:2, renderTo:"htmlId" //渲染表格到ID为htmlId的容器中 }); })
header列头显示的文本、dataIndex列对应的记录集字段(上面的fields)、sortable列是否可排序、renderer列的渲染函数、ShowUrl为自定义函数
上面的例子虽然简单,但是创建一个表格应该需要哪些准备元素都一一标明出来。对于需求复杂的表格,只是针对Ext.data.Store 的设定。接下来我们将要讨论针对不同的需求对数据存储器的复杂应用。