ext js的grid列表元件是功能強大且靈活的元件，不僅能方便滴處理後台資料，還能實現分頁、編輯、統計等功能。
本章先從grid的使用流程講起，然後一步步引入其幾大模組：列模式、選擇模式、檢視、分頁等。一一進行分析。
一、認識ext js的grid
展現資料和運算元據是網頁中最重要的應用，html是通過table來實現的，但table列表資料有很多問題：資料樣式的顯示、資料分頁、表列的排序、單元格的編輯等。
而extjs的grid元件解決了這些問題。
1、概述
grid元件中有許多功能類，每個類都代表乙個功能，如選擇、拖拽等，這些類最終通過gridpanel類同意起來。
ext.gridpanel類是所有類的中心，它通過整合store、pagind*******、columnmodel、gridview、rowselectionmodel等
來完成資料列表功能，即暗示它可以通過配置項(store,cm,sm,vie)從資料，表列，錶行，表檢視這4個方面來構建grid元件。
2、如何建立gridpanel
構建grid元件一般可以分為如下7個步驟：
01）定義資料源。定義資料源一般都是通過extjs資料模型來進行的,
var render = new ext.data.arrayreader({},[,,
,]);
var data = [
['altridk group inc',87.34,0.23,0.23],
['kevin',23,23,23]];
var ds = new ext.data.store();
02)定義columnmodel。獲得資料之後，接下來要做的就是想辦法展現它。二維表是目前最好的展現方式之一。
要使用二維表，首先得定義表頭，給出表列與資料列的對應關係，
var cm = new ext.grid.columnmodel([,,
,]);
這裡定義了4列，每列都通過dataindex屬性與上面**中的資料列對應，建立這種對應關係是通過ext.grid.columnmodel類來實現的。它用來
定義表列的相關資訊，如表頭，列排序等。
03）定義selectionmodel。
selectionmodel即選擇模式，在對列表資料進行操作之前，首先要選中需要操作的資料。當單擊列表中某位置時，是
表明選中改行還是該單元格？
這就是選擇模式要完成的任務。
var sm = new ext.grid.rowselectionmodel();
定義選擇模式不是必須的，因為grid元件會根據不同型別的gridpanel類採用不同的預設模式。這裡顯示呼叫它，其目的是為了選擇模式傳入配置項，完成功能上的定製。
04）定義view。檢視是列表資料最終顯示出來的二維表結構，對於不同型別的類別，其展現結構、樣式不盡相同，這得通過檢視配置項來進行定製。
var view = new ext.grid.gridview();
檢視也不是必須的。
05）定義pagingbar.分頁欄用來定義資料分頁操作，分頁是資料列表中最重要且常用的功能，
var pagingbar = new ext.paging*******(,顯示｛0｝-｛1｝'});
06)定義gridpanel。定義了前面5步後，現在就可以把它們組裝起來。實現組裝的就是gridpanel類，因為是panel類的子類，可以通過它來配置所有功能，
var grid = new ext.grid.gridpanel();
07)載入資料。生成gridpanel例項之後，很多使用者都會忘記最後一步：載入資料。
ds.load(});
通過store載入資料，它會自動地更新列表內容，資料載入可以在gridpanel類構建之前進行，也可以在其之後進行。
對grid元件的操作示例1
怎麼樣？是不是效果大不同了。你不會認為很難吧，嗯，確實，如果你對html和css完全搞不明白的話，勸你還是先去學學吧，對自己有信心的往下看。var cm new ext.grid.columnmodel else 別被嚇到，這麼一大段其實就是判斷是男是女，然後配上顏色。你要是覺得亂，也可以這麼做。f...
uni app元件 資訊列表元件
之前我一直在，要想提高自己的 質量，就一定要封裝自己的元件，所以我就盡量使用自己的元件。這樣可以提高自己的效率 寫元件的好處 減少 的冗餘 封裝元件的時候，為了不讓子元素的padding,影響父級元素的寬度。父級元素使用了怪異盒子 怪異盒子 不會計算padding box sizing border...
Ext器件 列表Grid使用說明
在ext中，grid的使用包括以下幾個步驟 1 獲取資料集，示例 如下 js var mydata ext 83.81,0.28,0.34,9 12 12 00am google 71.72,0.02,0.03,10 1 12 00am microsoft 52.55,0.01,0.02,7 4 1...