首先，乙個**應該有列定義，即定義表頭columnmodel：
// 定義乙個columnmodel，表頭中有四列
var cm = new ext.grid.columnmodel([,,
,]);
cm.defaultsortable = true;
該columnmodel定義了**的四個列，其每列的名稱和對應的資料鍵。請注意defaultsortable屬性，即為每個列都安上乙個可以排序的功能。如果只想某些列舉有該功能，可以設定：
,現在就來看看這個ext.data.store是如何轉換三種資料的。
資料的顯示顯得非常簡單：
html檔案：
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資料
至於這種資料的型別請大家自己看ajax的書籍：
//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();
})9.如何在grid的上方新增按鈕呢？
新增按鈕的關鍵之處在於tbar或bbar屬性設定*******工具條：
var grid = new ext.grid.gridpanel( } ,
new ext.*******.splitbutton({})
, }
,'-',]
}) });
10.將gridpanel放入乙個panel或tabpanel中
var tabs = new ext.tabpanel(,
]});
tabs.dolayout();
var panel = new ext.panel();
panel必須有div存在。其包含的component有items管理。
ExtJS4學習 多表頭Grid
做專案的時候，有時候會遇到多表頭的grid，在extjs4中，多表頭的實現已經很簡單了，本文介紹如何實現多表頭gird的功能。做專案的時候，有時候會遇到多表頭的grid，在extjs4中，多表頭的實現已經很簡單了，本文介紹如何實現多表頭gird的功能。之前有一篇文章，講的是如何實現grid的分頁功能...
ExtJS4學習 多表頭Grid
做專案的時候，有時候會遇到多表頭的grid，在extjs4中，多表頭的實現已經很簡單了，本文介紹如何實現多表頭gird的功能。做專案的時候，有時候會遇到多表頭的grid，在extjs4中，多表頭的實現已經很簡單了，本文介紹如何實現多表頭gird的功能。之前有一篇文章，講的是如何實現grid的分頁功能...
ExtJs 的學習歷程 Grid篇 1
一直在找乙個功能強大的grid,能夠滿足我在工作中的大部分需求。自從認識ext grid後,我就被深深住了,這不就是我要找的東西嗎?看了它的例子,就想著手用一下.但是,真正要將此控制項用到工作中，還需要做許多處理,於是我把工作分成幾個階段.1.grid顯示 2.grid編輯 3.grid的綜合應用 ...