Ext Grid的大致用法

2021-05-08 21:47:52 字數 2988 閱讀 1443

js檔案:

var grid = new ext.grid.gridpanel();

grid.render();

其顯示結果為:

2.如何在**中新增checkbox呢?

var sm = new ext.grid.checkboxselectionmodel();

var cm = new ext.grid.columnmodel([

new ext.grid.rownumberer(),//自動行號

sm,//新增的地方 ,

, ,]);

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

sm, ,

, ,]);

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"?> 2

1male

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

本文載自

關於call 和apply 的大致用法

call 在我看來主要的功能就是在不修改物件的情況下對物件的屬性進行 重寫,使之繼承乙個新物件的屬性 symtax fun.call thisarg arg1 arg2 先舉個簡單的例子 function vehicle color,speed var mycar new car red 100,2...

ext grid 關於數字的過濾

color darkblue for var key in values args.push color 這個迴圈向args陣列物件中賦值,從而在過濾主檔案 color green gridfilters.js color 中的getfilterdata方法中的var d concat f.seri...

我的Ext Grid例子一

msgsendpanel function reader new ext.data.jsonreader datastore.load 資料顯示 var datagrid new ext.grid.gridpanel store datastore,cm new ext.grid.columnmod...