數據存儲器由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(); });
|