最近空閒時間在學習ext2.0框架，只有乙個字的感嘆「強」，我從未想到js**能夠寫出這麼絢麗的web頁面出來，以前看到yui，驚若天人，如今看到ext2.0的東西，更是感覺震撼。
ext2.0是乙個js框架，它的grid控制項和其它可以顯示資料的控制項，能夠支援多種資料型別，如二維陣列、json資料和xml資料，甚至包括我們自定義的資料型別。ext為我們提供了乙個橋梁ext.data.store，通過它我們可以把任何格式的資料轉化成grid可以使用的形式，這樣就不需要為每種資料格式寫乙個grid的實現了。
首先，乙個**應該有列定義，即定義表頭columnmodel：
//定義乙個columnmodel，表頭中有四列
varcm
=new
ext.grid.columnmodel([,,
,]);
cm.defaultsortable
=true
; 該columnmodel定義了**的四個列，其每列的名稱和對應的資料鍵。請注意defaultsortable屬性，即為每個列都安上乙個可以排序的功能。如果只想某些列舉有該功能，可以設定：
,現在就來看看這個ext.data.store是如何轉換三種資料的。
1.二維陣列：
//arraydata
vardata =[
['1'
,'male',
'name1',
'descn1'],
['2'
,'male',
'name1',
'descn2'],
['3'
,'male',
'name3',
'descn3'],
['4'
,'male',
'name4',
'descn4'],
['5'
,'male',
'name5',
'descn5']
];//
arrayreader
vards
=new
ext.data.store(, [,,
,);grid.render();
其顯示結果為：
2.如何在**中新增checkbox呢？
var ** = new ext.grid.checkboxselectionmodel();
var cm = new ext.grid.columnmodel([
new ext.grid.rownumberer(),//自動行號
**,//新增的地方,,
,]);
var grid = new ext.grid.gridpanel();
3. 如何做grid上觸發事件呢？
下面是乙個cellclick事件
grid.addlistener('cellclick', cellclick);
function cellclick(grid, rowindex, columnindex, e)
4.如何做grid中做出快捷選單效果：
grid.addlistener('rowcontextmenu', rightclickfn);//右鍵選單**關鍵部分
var rightclick = new ext.menu.menu(,
]});
function rightclickfn(grid,rowindex,e)
function rmenu1fn()
其grid如下：
5.如何將一列中的資料根據要求進行改變呢？
比如說性別字段根據其male或female改變顯示的顏色，這種columnmode中設計：
var cm = new ext.grid.columnmodel([
new ext.grid.rownumberer(),
**,,,,
]);cm.defaultsortable = true;
function change***(value) else
} 其它兩種資料的grid顯示是相同的，其不同之處在於資料獲取的過程：
6.json資料
//jsondata
var data = ,,,
],'musicians': [,]
}//ds使用的memoryproxy物件和jsonreader物件
var ds = new ext.data.store(, [,,
,])});ds.load();
var grid = new ext.grid.gridpanel();
grid.render();
7.使用xml資料：
注意，讀取xml資料必須在伺服器上進行。
xml資料test.xml的內容：
<?xml version="1.0" encoding="utf-8"?>21
male
taylor
coder
var ds3 = new ext.data.store(, [ //使用xmlreader物件,,
,])});
8.從伺服器獲取資料和資料翻頁控制項
從乙個伺服器檔案，如asp、jsp或servlet中獲得資料二維array、json或xml資料，也可以被ext讀取，並被grid顯示：
伺服器檔案data.asp:
<%
start = cint(request("start"))
limit = cint(request("limit"))
dim json
json=cstr("")
if i <> limit + start - 1 then
json =json + ","
end if
next
json = json +"]}"
response.write(json)
%>
我們可以看到，這個頁面會根據傳入的start和limit的不同，返回不同的資料，其實質是個分頁的**。下面是start=0,limit=10的json資料：
,,,,,,,,,]}
我們使用分頁控制項來控制grid的資料：
ext.onready(function(),,,
]);cm.defaultsortable = true;
var ds = new ext.data.store(),
reader: new ext.data.jsonreader(, [,,
])});
ds.load(});
var grid = new ext.grid.gridpanel( 條到 條記錄，一共 條',
emptymsg: "沒有記錄"
}),tbar: new ext.paging*******( 條到 條記錄，一共 條',
emptymsg: "沒有記錄"
})});
grid.render();
})10.如何在grid的上方新增按鈕呢？
新增按鈕的關鍵之處在於tbar或bbar屬性設定*******工具條：
var grid = new ext.grid.gridpanel( } ,
new ext.*******.splitbutton({})
, }
,'-',]
}) });
11.將gridpanel放入乙個panel或tabpanel中
var tabs = new ext.tabpanel(,
]});
tabs.dolayout();
var panel = new ext.panel();
panel必須有div存在。其包含的component有items管理。
Ext2 0框架的Grid使用介紹
最近空閒時間在學習ext2.0框架，只有乙個字的感嘆 強 我從未想到js 能夠寫出這麼絢麗的web頁面出來，以前看到yui，驚若天人，如今看到ext2.0的東西，更是感覺震撼。ext2.0是乙個js框架，它的grid控制項和其它可以顯示資料的控制項，能夠支援多種資料型別，如二維陣列 json資料和x...
Ext2 0框架的Grid使用介紹
最近空閒時間在學習ext2.0框架，只有乙個字的感嘆 強 我從未想到js 能夠寫出這麼絢麗的web頁面出來，以前看到yui，驚若天人，如今看到ext2.0的東西，更是感覺震撼。ext2.0是乙個js框架，它的grid控制項和其它可以顯示資料的控制項，能夠支援多種資料型別，如二維陣列 json資料和x...
Ext2 0框架的Grid使用介紹
ext2.0框架的grid使用介紹 最近空閒時間在學習ext2.0框架，只有乙個字的感嘆 強 我從未想到js 能夠寫出這麼絢麗的web頁面出來，以前看到yui，驚若天人，如今看到ext2.0的東西，更是感覺震撼。ext2.0是乙個js框架，它的grid控制項和其它可以顯示資料的控制項，能夠支援多種資...