数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。
示例一:最简单的GridPanel。
Ext.onReady(function(){ var data = [ [1,"张三",20], [2,"李四",20], [3,"王五",20], [4,"赵六",20] ]
var store = new Ext.data.SimpleStore({ data:data, fields:["id","name","age"] });
var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:400, height:400, store:store, columns:[ {header:"id",dataIndex:"id"}, {header:"姓名",dataIndex:"name"}, {header:"年龄",dataInde:"age"} ], autoExpandColumn:2// 默认自动扩展宽度的字段 }); });
|
示例二:可排序的GridPanel。
Ext.onReady(function(){ var data = [ [1,"张三",43], [2,"李四",34], [3,"王五",26], [4,"赵六",67] ]
var store = new Ext.data.SimpleStore({ data:data, fields:["id","name","age"] });
var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:400, height:400, store:store, columns:[ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true} ], autoExpandColumn:2// 默认自动扩展宽度的字段 }); });
|
示例三:使用Ext.grid.ColumnModel来创建表格中列的定义信息。
Ext.onReady(function(){ var data = [ [1,"张三",43], [2,"李四",34], [3,"王五",26], [4,"赵六",67] ]
var store = new Ext.data.SimpleStore({ data:data, fields:["id","name","age"] });
var colM = new Ext.grid.ColumnModel([ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true} ]);
var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:400, height:400, store:store, cm:colM, autoExpandColumn:2// 默认自动扩展宽度的字段 }); });
|
示例四:添加链接。
function showUrl(value){ return "<a href=http://"+value+">"+value+"</a>"; }
Ext.onReady(function(){ var data = [ [1,"张三",43,"www.ibeifeng.com"], [2,"李四",34,"www.ibeifeng.com"], [3,"王五",26,"www.ibeifeng.com"], [4,"赵六",67,"www.ibeifeng.com"] ]
var store = new Ext.data.SimpleStore({ data:data, fields:["id","name","age","homePage"] });
var colM = new Ext.grid.ColumnModel([ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true}, {header:"个人主页",dataIndex:"homePage",renderer:showUrl} ]);
var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:500, height:400, store:store, cm:colM, autoExpandColumn:3// 默认自动扩展宽度的字段 }); });
|
示例五:使用JsonStore数据存储器。
function showUrl(value){ return "<a href=http://"+value+">"+value+"</a>"; }
Ext.onReady(function(){ var data = [ { id:1, name:"张三", age:43, homePage:"www.ibeifeng.com" }, { id:2, name:"李四", age:34, homePage:"www.ibeifeng.com" }, { id:3, name:"王五", age:26, homePage:"www.ibeifeng.com" }, { id:4, name:"赵六", age:67, homePage:"www.ibeifeng.com" }
]
var store = new Ext.data.JsonStore({ data:data, fields:["id","name","age","homePage"] });
var colM = new Ext.grid.ColumnModel([ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true}, {header:"个人主页",dataIndex:"homePage",renderer:showUrl} ]);
var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:500, height:400, store:store, cm:colM, autoExpandColumn:3// 默认自动扩展宽度的字段 }); });
|
示例六:使用XML储存数据。
<?xml version="1.0" encoding="UTF-8"?> <dataset> <row> <id>1</id> <name>张三</name> <age>43</age> <homePage>www.ibeifeng.com</homePage> </row> <row> <id>2</id> <name>李四</name> <age>24</age> <homePage>www.ibeifeng.com</homePage> </row> <row> <id>3</id> <name>王五</name> <age>45</age> <homePage>www.ibeifeng.com</homePage> </row> <row> <id>4</id> <name>赵六</name> <age>12</age> <homePage>www.ibeifeng.com</homePage> </row> </dataset>
|
function showUrl(value){ return "<a href=http://"+value+" target='_blank'>"+value+"</a>"; }
Ext.onReady(function(){ var store=new Ext.data.Store({ url:"data.xml", reader:new Ext.data.XmlReader({ record:"row"}, ["id","name","age","homePage"]) });
var colM = new Ext.grid.ColumnModel([ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true}, {header:"个人主页",dataIndex:"homePage",renderer:showUrl} ]);
var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:500, height:400, store:store, cm:colM, autoExpandColumn:3// 默认自动扩展宽度的字段 });
store.load(); });
|