Ext2.0框架的Grid使用介紹
最近空閒時間在學習Ext2.0框架，只有一個字的感嘆“強”，我從未想到JS代碼能夠寫出這麼絢麗的Web頁面出來，以前看到YUI，驚若天人，如今看到EXT2.0的東西，更是感覺震撼。
Ext2.0是一個JS框架，它的Grid控件和其它可以顯示數據的控件，能夠支持多種數據類型，如二維數組、Json數據和XML數據，甚至包括我們自定義的數據類型。Ext爲我們提供了一個橋樑Ext.data.Store，通過它我們可以把任何格式的數據轉化成grid可以使用的形式，這樣就不需要爲每種數據格式寫一個grid的實現了。
首先，一個表格應該有列定義，即定義表頭ColumnModel：
// 定義一個ColumnModel，表頭中有四列
var cm = new Ext.grid.ColumnModel([
{header:'編號',dataIndex:'id'},
{header:'性別',dataIndex:'sex'},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
該ColumnModel定義了表格的四個列，其每列的名稱和對應的數據鍵。請注意defaultSortable屬性，即爲每個列都安上一個可以排序的功能。如果只想某些列舉有該功能，可以設置：
{header:'編號',dataIndex:'id',Sortable:true},
現在就來看看這個Ext.data.Store是如何轉換三種數據的。
1.二維數組：
// ArrayData
var data = [
['1','male','name1','descn1'],
['2','male','name1','descn2'],
['3','male','name3','descn3'],
['4','male','name4','descn4'],
['5','male','name5','descn5']
];
// ArrayReader
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id',mapping: 0},
{name: 'sex',mapping: 1},
{name: 'name',mapping: 2},
{name: 'descn',mapping: 3}
])
});
ds.load();
ds要對應兩個部分：proxy和reader。proxy告訴我們從哪裏獲得數據，reader告訴我們如何解析這個數據。
現在用的是Ext.data.MemoryProxy，它將內存中的數據data作爲參數傳遞。Ext.data.ArrayReader專門用來解析數組，並且告訴我們它會按照定義的規範進行解析，每行按順序讀取四個數據，第一個叫id，第二個叫sex，第三個叫name，第四個descn。這些是跟cm定義中的dataIndex對應的。這樣cm就知道哪列應該顯示那條數據了。
mapping屬性用於標記data中的讀取後的數據與標頭的映射關係，一般是不用設置的。但如果我們想讓sex的數據中name欄中出現，可以設置mapping值。即id的mapping爲2,後者爲0。
記得要執行一次ds.load()，對數據進行初始化。
數據的顯示顯得非常簡單：
HTML文件：
<div id='grid'></div>
JS文件：
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm
});
grid.render();
其顯示結果爲：
2.如何在表格中添加CheckBox呢？
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//自動行號
sm,//添加的地方
{header:'編號',dataIndex:'id'},
{header:'性別',dataIndex:'sex'},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,//添加的地方
title: 'HelloWorld'
});
3. 如何做Grid上觸發事件呢？
下面是一個cellclick事件
grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext.MessageBox.alert('show','當前選中的數據是'+data);
4.如何做Grid中做出快捷菜單效果：
grid.addListener('rowcontextmenu', rightClickFn);//右鍵菜單代碼關鍵部分
var rightClick = new Ext.menu.Menu({
id:'rightClickCont', //在HTML文件中必須有個rightClickCont的DIV元素
items: [
{
id: 'rMenu1',
handler: rMenu1Fn,//點擊後觸發的事件
text: '右鍵菜單1'
},
{
//id: 'rMenu2',
//handler: rMenu2Fn,
text: '右鍵菜單2'
}
]
});
function rightClickFn(grid,rowindex,e){
e.preventDefault();
rightClick.showAt(e.getXY());
function rMenu1Fn(){
Ext.MessageBox.alert('right','rightClick');
其Grid如下：
5.如何將一列中的數據根據要求進行改變呢？
比如說性別字段根據其male或female改變顯示的顏色，這種ColumnMode中設計：
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'編號',dataIndex:'id'},
{header:'性別',dataIndex:'sex',renderer:changeSex},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
function changeSex(value){
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'>紅男</span>";
} else {
return "<span style='color:green;font-weight:bold;'>綠女</span>";
}
} 其它兩種數據的Grid顯示是相同的，其不同之處在於數據獲取的過程：
6.Json數據
至於這種數據的類型請大家自己看Ajax的書籍：
//JsonData
var data = {
'coders': [
{ 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': },
{ 'id': '2', 'sex': 'male','name':'Hunter', 'descn': '[email protected]' },
{ 'id': '3', 'sex': 'female','name':'Harold', 'descn': '[email protected]' },
{ 'id': '4', 'sex': 'male','name':'Harolds', 'descn': '[email protected]' }
],
'musicians': [
{ 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
{ 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
]
//ds使用的MemoryProxy對象和JsonReader對象
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.JsonReader({root: 'coders'}, [
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
ds.load();
var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,
title: 'HelloWorld',
autoHeight: true//一定要寫，否則顯示的數據會少一行
});
grid.render();
7.使用XML數據：
注意，讀取XML數據必須在服務器上進行。
XML數據test.xml的內容：
<?xml version="1.0" encoding="UTF-8"?>
<dataset>
<results>2</results>
<item>
<id>1</id>
<sex>male</sex>
<name>Taylor</name>
<descn>Coder</descn>
</item>
</dataset>var ds3 = new Ext.data.Store({
url: 'test.xml', //XML數據
reader: new Ext.data.XmlReader({record: 'item'}, [ //使用XmlReader對象
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
8.從服務器獲取數據和數據翻頁控件
從一個服務器文件，如ASP、JSP或Servlet中獲得數據二維Array、JSON或XML數據，也可以被Ext讀取，並被Grid顯示：
服務器文件data.asp:
<%
start = cint(request("start"))
limit = cint(request("limit"))
dim json
json=cstr("{totalProperty:100,root:[")
for i = start to limit + start-1
json =json + cstr("{'id':'") +cstr(i) + cstr("','name':'name") + cstr(i) + cstr("','descn':'descn") + cstr(i) + cstr("'}")
if i <> limit + start - 1 then
json =json + ","
end if
next
json = json +"]}"
response.write(json)
%>
我們可以看到，這個頁面會根據傳入的start和limit的不同，返回不同的數據，其實質是個分頁的代碼。下面是start=0,limit=10的JSON數據：
{totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'},{'id':'1','name':'name1','descn':'descn1'},{'id':'2','name':'name2','descn':'descn2'},{'id':'3','name':'name3','descn':'descn3'},{'id':'4','name':'name4','descn':'descn4'},{'id':'5','name':'name5','descn':'descn5'},{'id':'6','name':'name6','descn':'descn6'},{'id':'7','name':'name7','descn':'descn7'},{'id':'8','name':'name8','descn':'descn8'},{'id':'9','name':'name9','descn':'descn9'}]}
我們使用分頁控件來控制Grid的數據：
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'編號',dataIndex:'id'},
{header:'性別',dataIndex:'sex'},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'data.asp'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
ds.load({params:{start:0,limit:10}});
var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,
title: 'ASP->JSON',
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
emptyMsg: "沒有記錄"
}),
tbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
emptyMsg: "沒有記錄"
})
});
grid.render();
})
10.如何在Grid的上方添加按鈕呢？
添加按鈕的關鍵之處在於tbar或bbar屬性設置Toolbar工具條：
var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,
title: 'HelloWorld',
tbar: new Ext.Toolbar({
items:[
{
id:'buttonA'
,text:"Button A"
,handler: function(){ alert("You clicked Button A"); }
}
,
new Ext.Toolbar.SplitButton({})
,{
id:'buttonB'
,text:"Button B"
,handler: function(){ alert("You clicked Button B"); }
}
,
'-'
,{
id:'buttonc'
,text:"Button c"
}
]
})
});
11.將GridPanel放入一個Panel或TabPanel中
var tabs = new Ext.TabPanel({
collapsible: true
,renderTo: 'product-exceptions'
,width: 450
,height:400
,activeTab: 0
,items:[
{
title: 'Unmatched'
},{
title: 'Matched'
}
]
});
tabs.doLayout();
var panel = new Ext.Panel({
renderTo: 'panel',
title:'panel',
collapsible:true,
width:450,
height:400,
items:[grid] //管理grid
});
Panel必須有DIV存在。其包含的Component有items管理。
本文轉自:http://sep229.blog.163.com/blog/static/10884638200802901957429/