Ext.grid.RowExpander插件的使用，

看官方的例子时候由一个grid实例，在每一行之前有个加号，展开可以显示内容，在实际应用中还是非常有用的，照搬例子的代码，发现老是提示对象不存在，查阅资料后发现是没有加载插件，这里和大家分享下Ext.grid.RowExpander插件的使用，

首先定义表格grid

//生成表格
function makeGrid(){
return new Ext.grid.GridPanel({
      border:false,
      viewConfig: {
         forceFit:true//加入该选项全屏显示表格且自适应大小，不产生横向滚动条
      },
      buttonAlign :'left',
      region:'center',
      plugins: expander,//定义插件
      loadMask: true,
      store: ds,
      cm: new Ext.grid.ColumnModel([
         expander,//加载插件
         new Ext.grid.RowNumberer(),
         //new Ext.grid.CheckboxSelectionModel(),
         {header:"ID",width:50,sortable:true,dataIndex:'roles_id'},
         {header:"名称", width:100,sortable:false,dataIndex:'roles_<?php echo $user_languag;?>_name'},
         {header:"类型", width:100,sortable:false,renderer:check,dataIndex:'roles_type'}
         ]),
      //sm:new Ext.grid.CheckboxSelectionModel(),
      //autoExpandColumn:4,
      autoScroll: true,
      tbar: [
         {text:"添加",iconCls:'add_role',handler:newRole},{xtype:'tbseparator'},
         //{text:"删除",iconCls:'del',handler:del},{xtype:'tbseparator'},
         {text:"复制权限",iconCls:'copy',handler:copyRole},{xtype:'tbseparator'},
{text:"刷新",iconCls:'refresh',handler:function (){ds.reload();}},
         '<font color="red">提示：双击一行可进行编辑！</font>'
      ],
      bbar: new Ext.PagingToolbar({
         pageSize: 50,
         store: ds,
         displayInfo: true,
         displayMsg: '第{0} 到 {1} 条数据 共{2}条',
         emptyMsg: '没有数据'
      })
   });
}

接着在生成表格之前加载插件，插件代码在ext官方论坛找到

/*********************************************
         Ext.grid.RowExpander插件
*********************************************/
Ext.grid.RowExpander = function(config){
   Ext.apply(this, config);

   this.addEvents({
      beforeexpand : true,
      expand: true,
      beforecollapse: true,
      collapse: true
   });

   Ext.grid.RowExpander.superclass.constructor.call(this);

   if(this.tpl){
      if(typeof this.tpl == 'string'){
         this.tpl = new Ext.Template(this.tpl);
      }
      this.tpl.compile();
   }

   this.state = {};
   this.bodyContent = {};
};

Ext.extend(Ext.grid.RowExpander, Ext.util.Observable, {
   header: "",
   width: 20,
   sortable: false,
   fixed:true,
   menuDisabled:true,
   dataIndex: '',
   id: 'expander',
   lazyRender : true,
   enableCaching: true,

   getRowClass : function(record, rowIndex, p, ds){
      p.cols = p.cols-1;
      var content = this.bodyContent[record.id];
      if(!content && !this.lazyRender){
         content = this.getBodyContent(record, rowIndex);
      }
      if(content){
         p.body = content;
      }
      return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
   },

   init : function(grid){
      this.grid = grid;

      var view = grid.getView();
      view.getRowClass = this.getRowClass.createDelegate(this);

      view.enableRowBody = true;

      grid.on('render', function(){
         view.mainBody.on('mousedown', this.onMouseDown, this);
      }, this);
   },

   getBodyContent : function(record, index){
      if(!this.enableCaching){
         return this.tpl.apply(record.data);
      }
      var content = this.bodyContent[record.id];
      if(!content){
         content = this.tpl.apply(record.data);
         this.bodyContent[record.id] = content;
      }
      return content;
   },

   onMouseDown : function(e, t){
      if(t.className == 'x-grid3-row-expander'){
         e.stopEvent();
         var row = e.getTarget('.x-grid3-row');
         this.toggleRow(row);
      }
   },

   renderer : function(v, p, record){
      p.cellAttr = 'rowspan="2"';
      return '<div class="x-grid3-row-expander">&#160;</div>';
   },

   beforeExpand : function(record, body, rowIndex){
      if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
         if(this.tpl && this.lazyRender){
            body.innerHTML = this.getBodyContent(record, rowIndex);
         }
         return true;
      }else{
         return false;
      }
   },

   toggleRow : function(row){
      if(typeof row == 'number'){
         row = this.grid.view.getRow(row);
      }
      this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
   },

   expandRow : function(row){
      if(typeof row == 'number'){
         row = this.grid.view.getRow(row);
      }
      var record = this.grid.store.getAt(row.rowIndex);
      var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
      if(this.beforeExpand(record, body, row.rowIndex)){
         this.state[record.id] = true;
         Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
         this.fireEvent('expand', this, record, body, row.rowIndex);
      }
   },

   collapseRow : function(row){
      if(typeof row == 'number'){
         row = this.grid.view.getRow(row);
      }
      var record = this.grid.store.getAt(row.rowIndex);
      var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
      if(this.fireEvent('beforcollapse', this, record, body, row.rowIndex) !== false){
         this.state[record.id] = false;
         Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
         this.fireEvent('collapse', this, record, body, row.rowIndex);
      }
   }
});

接着定义模板，主要是显示展开的内容，用到Ext.template类

expander = new Ext.grid.RowExpander({
tpl : new Ext.Template(
'<br>&nbsp;&nbsp;<b>游戏权限:</b> {games}<br><br>',
'&nbsp;<b>下属人员:</b> {users}<br><br>'
)
});