Extjs的GridPanel的RowExpander的擴展

對Extjs的grid使用，有時候單單使用其中的某些組、或某些行是遠遠不夠的，還需要對行進行一些擴展，如：與filters相似的row擴展控件，如下

這個控件，我也是從網上找的小例子，按照其內部的某些方法，結合自己的工程，應用到相應的文件中，其使用過程還算簡單。一般的擴展只需要在行的內部添加些文字或者圖片就可以了，我在使用的時候，在行的內部又嵌套了一個grid，達到了多級顯示數據的效果，具體界面如下：

外面一層是一個groupGrid，內部為其行添加擴展控件內部嵌套grid，這樣看起來很適合多級數據的顯示

//首先在grid內添加插件，形式上是，作為grid內部的一個屬性
        plugins: expander,
//添加expander，其實這種方法使用起來很簡單
    var expander = new Ext.grid.RowExpander
        ({
            tpl: new Ext.Template('<div class="detailData"></div>')
        });//定義控件

//添加進columnModel內
     this._columnModel = new Ipms.expertApplys.ExpertApplyAdjustApplyItemGroupGridPanel_ColumnModel(expander, this._selections);
   //這個時候頁面內部在行的前面會顯示'+'號，

//之后點擊‘+’號添加希望顯示的內容，即調用.on定義的expand事件
    expander.on("expand", function (expander, r, body, rowIndex) {
        this._rowPanel = new Ipms.expertApplys.ExpertApplyAdjustApplyItemGroupGridPanel_RowPanel('ConstructTaskItemsForApplyItemGrid
Panel', '', expander, r, body, rowIndex);
    });
//在這里新建了一個gridpanel，將需要的參數傳進去，獲得相應的數據，
下面是具體的Panel定義，需要注意的只是其中的一個render，就可以獲取確定的數據

Ipms.expertApplys.ExpertApplyAdjustApplyItemGroupGridPanel_RowPanel = function (panelId, title, expander, r, body, rowIndex) {

    var applyItemID = r.data.id;
    var constructTaskItemStore = new Ipms.expertApplys.ExpertApplyAdjustStore(Ipms.service.off.Service + '/Query', {
 applyItemID: applyItemID });

    this._view = new Ext.grid.GridView({
        forceFit: true,
        ignoreAdd: true,
        emptyText: '沒有滿足條件的條目'
        });
    
    var store = constructTaskItemStore;
    this._selections = new Ext.grid.CheckboxSelectionModel();
    this._columnModel = new Ipms.expertApplys.ExpertApplyAdjustApplyItemGroupGridPanel_ChildGridPanel_ColumnModel(this._selections, 

false);

    Ipms.expertApplys.ExpertApplyAdjustApplyItemGroupGridPanel_RowPanel.superclass.constructor.call(this, {
        id: panelId,
        store: store,
        title: title,
        cm: this._columnModel,
        clicksToEdit: 1,
        autoExpandColumn: true,
        enableColumnHide: true,
        enableColumnMove: true,
        stateful: true,
        sm: this._selections,
        renderTo: Ext.DomQuery.select("div.detailData", body)[0],//最重要的一行，跟上面定義的detailData呼應，將內容渲染到定義了class的當前層。
        viewConfig: {
            forceFit: true,
            emptyText: '沒有滿足條件的條目'
        },
        view: this._view,
        autoWidth: true,
        autoHeight: true
    });
    constructTaskItemStore.load();
}
Ext.extend(Ipms.expertApplys.ExpertApplyAdjustApplyItemGroupGridPanel_RowPanel, Ext.grid.EditorGridPanel)；

至此，內部嵌套着grid的擴展行已經制作完畢，然而當選擇外部某一行的時候會默認將內部grid的checkbox選中，但是雖然內部行已經打上“勾”，實際上內部行的選擇值卻是false，那么就需要取消外部選擇行的事件，這時只需添加這樣一行，就可以去除行選擇的所有事件：

    this._selections.handleMouseDown = Ext.emptyFn; //不響應MouseDown事件

如果需要，添加其他的事件，則自己動手寫就可以了，對應事件分別如下：

 sm.on('rowselect',function(sm_,rowIndex,record){//行選中的時候    ，sm定義的是selectModel       
        }, this);
 sm.on('rowdeselect',function(sm_,rowIndex,record){//行未選中的時候
       }, this);