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([,,

,cm.defaultsortable = 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(, [

ds.load();

ds要對應兩個部分：proxy和reader。proxy告訴我們從**獲得資料，reader告訴我們如何解析這個資料。

現在用的是ext.data.memoryproxy，它將記憶體中的資料data作為引數傳遞。ext.data.arrayreader專門用來解析陣列，並且告訴我們它會按照定義的規範進行解析，每行按順序讀取四個資料，第乙個叫id，第二個叫***，第三個叫name，第四個descn。這些是跟cm定義中的dataindex對應的。這樣cm就知道哪列應該顯示那條資料了。

記得要執行一次ds.load()，對資料進行初始化。

資料的顯示顯得非常簡單：

html檔案：

js檔案：

var grid = new ext.grid.gridpanel(,,,

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(, [ //使用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

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({})

id:'buttonb'

,text:"button b"

,handler: function()

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管理。

本文**:

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控制項和其它可以顯示資料的控制項，能夠支援多種資...

Ext2 0框架的Grid使用介紹

Ext2 0框架的Grid使用介紹

Ext2 0框架的Grid使用介紹

Ext2 0框架的Grid使用介紹

相關推薦