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: ,
        autoExpandColumn: true,
        enableColumnHide: true,
        enableColumnMove: true,
        stateful: true,
        sm: this._selections,
        renderTo: Ext.DomQuery.select("div.detailData", body)[],//最重要的一行，跟上面定义的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);