Ext2 0框架的Grid使用介紹

2021-04-15 01:18:47 字數 3960 閱讀 1878

最近空閒時間在學習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控制項和其它可以顯示資料的控制項,能夠支援多種資...