深入淺析Extjs中store分組功能的使用方法_javascript技巧

兩點需要注意的地方：

1、在創(chuàng)建store時，需要設(shè)置groupField屬性的值，即為需要分組的值

for example:

JavaScript代碼

在這個數(shù)據(jù)模型中，我們需要以性別(sex)分組，那么請看下面的store

JavaScript代碼

接下來，我們需要定義分組顯示的tpl

JavaScript代碼

在gridPanel中，代碼如下：配置features為上述定義的groupingFeature

JavaScript代碼

效果圖如下：

當然實現(xiàn)分組后，在gridPanel中sex這一列就可以不用顯示。

需要注意的是store中的數(shù)據(jù)如果在變化的時候，分組是不是也可以正常顯示呢？

現(xiàn)在給grid增加一個itemclick事件，代碼如下：

JavaScript代碼

效果如下圖

可以看出來，界面并不是我們想要的，那么如何解決呢？（最開始愚笨的解決方案是我將此gridPanel移除并銷毀掉，重新加載）我將listeners監(jiān)聽事件的代碼做了一些變換

JavaScript代碼

再看效果：

這個就是我們想要的效果，在動態(tài)變化store中的數(shù)據(jù)時，分組也要實現(xiàn)，而不是將數(shù)據(jù)追加在gridPanel的最后。對應(yīng)這兩段代碼的區(qū)分，主要在，store添加數(shù)據(jù)的方法，前者是add(record),后者是loadData(records,[append])

起初不能理解為什么同樣是store添加數(shù)據(jù)，效果卻不一樣，看官方文檔的解釋，add(),The new Model instances will be added at the end of the existing collection.(將數(shù)據(jù)追加在集合的最后）恍然大悟，loadData是按照store的規(guī)則將數(shù)據(jù)加載進來。

另外，如何移除組中最舊一行，自己動手查了一下，文檔實現(xiàn)了，在這里與大家分享：

//將前面的listeners監(jiān)聽事件修改如下：

注意其中first([boolean group])方法，如果不傳參數(shù)，獲取的是store中的第一條數(shù)據(jù)，傳參為true時，返回的是store分組以組名為key，組內(nèi)第一條數(shù)據(jù)為value的多個對象，PersonStore.first(true).female獲取female組內(nèi)的第一條數(shù)據(jù)，想獲取male中的，可以使用PersonStore.first(true).male

JavaScript代碼

為避免removedRecords占用內(nèi)存，進行了進一步的處理，功能可以實現(xiàn)，但是方法有些笨，大家有好的辦法可以交流交流

看代碼：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com