資源描述：
《ext_grid控件精華展現(xiàn)(0積分下載)》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在行業(yè)資料-天天文庫。
1、EXTGrid控件精華展現(xiàn)javascriptEXTGrid控件精華展現(xiàn)javascriptEXTGrid控件精華展現(xiàn)javascript2009-05-0609:47無論是界面之美，還是功能之強，ext的表格控件都高居榜首。單選行，多選行，高亮顯示選中的行，推拽改變列寬度，按列排序，這些基本功能咱們就不提了。自動生成行號，支持checkbox全選，動態(tài)選擇顯示哪些列，支持本地以及遠程分頁，可以對單元格按照自己的想法進行渲染，這些也算可以想到的功能。再加上可編輯grid，添加新行，刪除一或多行，提示臟數(shù)據(jù)，推拽改變grid大小，grid之間推拽一
2、或多行，甚至可以在tree和grid之間進行拖拽，啊，這些功能實在太神奇了。更令人驚嘆的是，這些功能竟然都在ext表格控件里實現(xiàn)了。呵呵~不過ext也不是萬能的，與fins的ecside比較，ext不能鎖定列（土豆說1.x里支持鎖定列，但是2.0里沒有了，因為影響效率。），也沒有默認的統(tǒng)計功能，也不支持excel，pdf等導出數(shù)據(jù)。另外fins說，通過測試ecside的效率明顯優(yōu)于ext呢。:)2.2.讓我們搞一個grid出來耍耍吧。光說不練不是我們的傳統(tǒng)，讓我們基于examples里的例子，來自己搞一個grid看看效果，同時也可以知道一個gri
3、d到底需要配置些什么東西。1.首先我們知道表格肯定是二維的，橫著叫行，豎著叫列。跟設計數(shù)據(jù)庫，新建表一樣，我們要先設置這個表有幾列，每列叫啥名字，啥類型，咋顯示，這個表格的骨架也就出來了。ext里，這個列的定義，叫做ColumnModel，簡稱cm的就是它，它作為整個表格的列模型，是要首先建立起來的。這里我們建立一個三列的表格，第一列叫編號(code)，第二列叫名稱(name)，第三列叫描述(descn)。varcm=newExt.grid.ColumnModel([{header:'編號',dataIndex:'id'},{header:'名稱
4、',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);看到了吧？非常簡單的定義了三列，每列的header表示這列的名稱，dataIndex是跟后面的東西對應的，咱們暫且不提?，F(xiàn)在只要知道有了三列就可以了。1.有了表格的骨架，現(xiàn)在我們要向里邊添加數(shù)據(jù)了。這個數(shù)據(jù)當然也是二維了，為了簡便，我們學習examples里的array-grid.js里的方式，把數(shù)據(jù)直接寫到js里。vardata=[['1','name1','descn1'],['2','name2','descn2'],['3','na
5、me3','descn3'],['4','name4','descn4'],['5','name5','descn5']];很顯然，我們這里定義了一個二維數(shù)據(jù)，（什么？你不知道這是二維數(shù)組？快改行吧，這里不是你該待的地方。）這個有五條記錄的二維數(shù)組，顯示到grid里就應該是五行，每行三列，正好對應這id,name,descn，在我們的腦子里應該可以想像出grid顯示的結果了，為了讓想像變成顯示，我們還需要對原始數(shù)據(jù)做一下轉化。2.因為咱們希望grid不只能支持array，還可以支持json，支持xml，甚至支持咱們自己定義的數(shù)據(jù)格式，ext為咱們
6、提供了一個橋梁，Ext.data.Store，通過它我們可以把任何格式的數(shù)據(jù)轉化成grid可以使用的形式，這樣就不需要為每種數(shù)據(jù)格式寫一個grid的實現(xiàn)了?，F(xiàn)在咱們就來看看這個Ext.data.Store是如何轉換array的。vards=newExt.data.Store({proxy:newExt.data.MemoryProxy(data),reader:newExt.data.ArrayReader({},[{name:'id'},{name:'name'},{name:'descn'}])});ds.load();ds要對應兩個部分：p
7、roxy和reader。proxy告訴我們從哪里獲得數(shù)據(jù)，reader告訴我們?nèi)绾谓馕鲞@個數(shù)據(jù)?，F(xiàn)在我們用的是Ext.data.MemoryProxy，它是專門用來解析js變量的。你可以看到，我們直接把data作為參數(shù)傳遞進去了。Ext.data.ArrayReader專門用來解析數(shù)組，并且告訴我們它會按照定義的規(guī)范進行解析，每行讀取三個數(shù)據(jù)，第一個叫id，第二個叫name，第三個descn。是不是有些眼熟，翻到前面cm定義的地方，哦，原來跟dataIndex是對應的。這樣cm就知道哪列應該顯示那條數(shù)據(jù)了。唉，你要是能看明白這一點，那你實在是太聰
8、明了。記得要執(zhí)行一次ds.load()，對數(shù)據(jù)進行初始化。有兄弟可能要問了，要是我第一列數(shù)據(jù)不是id而是name，第二列數(shù)據(jù)不是name
