Extjs 使用RowExpander将普通栅格更改为栅格

所以我在这里有一个工作视图，它创建了我的网格

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    title: '<center>Results</center>',
    store: 'User', 
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        items: [
            { xtype: 'tbtext',  text: 'Loading...', itemId: 'recordNumberItem'  },
            '->',
            { text: 'Print', itemId: 'print' },
            '-',
            { text: 'Export', itemId: 'export' }
        ]
    }],
    initComponent: function() {
        this.columns = [
            {header: 'Name',  dataIndex: 'name', flex: 4, tdCls: 'grid_cell'},
            {header: 'ID', dataIndex: 'ID', flex: 2, tdCls: 'grid_cell'},
            {header: 'Mid Name', dataIndex: 'mid_name', flex: 3, tdCls: 'grid_cell'},
            {header: 'Last Name', dataIndex: 'last_name', flex: 4, tdCls: 'grid_cell'},
            {header: 'Address', dataIndex: 'adress', flex: 3, tdCls: 'grid_cell'}
        ];
        this.callParent(arguments); //Calls the parent method of the current method in order to override 

        var store = this.getStore(); //Retrieving number of records returned
            textItem = this.down('#recordNumberItem');
            textItem.setText('Number of records: ' + store.getCount());

            //var val = Ext.getCmp('criteria_1').getValue();
            //store.filter('ID', val); 

    }   
});

Ext.define（'AM.view.user.List'{
扩展：“Ext.grid.Panel”，
别名：“widget.userlist”，
标题：“结果”，
存储区：'用户'，
摘要：[{
xtype:'工具栏'，
船坞：“底部”，
项目：[
{xtype:'tbtext'，text:'Loading…'，itemId:'recordNumberItem'}，
'->',
{text:'Print'，itemId:'Print'}，
'-',
{text:'Export'，itemId:'Export'}
]
}],
initComponent:function（）{
此值为。列=[
{header:'Name'，dataIndex:'Name'，flex:4，tdCls:'grid_cell'}，
{header:'ID'，dataIndex:'ID'，flex:2，tdCls:'grid_cell'}，
{header:'Mid Name'，dataIndex:'Mid_Name'，flex:3，tdCls:'grid_cell'}，
{header:'Last Name'，dataIndex:'Last_Name'，flex:4，tdCls:'grid_cell'}，
{header:'Address'，dataIndex:'Address'，flex:3，tdCls:'grid_cell'}
];
this.callParent（arguments）；//调用当前方法的父方法以重写
var store=this.getStore（）；//检索返回的记录数
textItem=this.down（“#recordNumberItem”）；
textItem.setText（'记录数：'+store.getCount（））；
//var val=Ext.getCmp（'criteria_1'）.getValue（）；
//store.filter（'ID'，val）；
}   
});

我想将网格中的每一行转换为可展开和可折叠的，如以下行展开器下的Sencha文档所示：

---

我已经尝试添加插件，但无法让它工作。有什么想法吗？

像这样使用插件配置：

Ext.define('AM.view.user.List',{
   extend: 'Ext.grid.Panel',
   //other configs
   plugins: [{
      ptype: 'rowexpander',
      rowBodyTpl: ['{field}']
   }]
});

请参见一个工作示例。此外，Sencha Docs在右侧提供了一个“代码预览”面板，其中显示了他们使用的代码

---

我在书中读到，您不能在initComponent中配置插件，尽管这是在rowexpander还是ux时针对ExtJS 4.1的。我不确定它在4.2中的相关性。

使用插件配置，如下所示：

Ext.define('AM.view.user.List',{
   extend: 'Ext.grid.Panel',
   //other configs
   plugins: [{
      ptype: 'rowexpander',
      rowBodyTpl: ['{field}']
   }]
});

请参见一个工作示例。此外，Sencha Docs在右侧提供了一个“代码预览”面板，其中显示了他们使用的代码

---

我在书中读到，您不能在initComponent中配置插件，尽管这是在rowexpander还是ux时针对ExtJS 4.1的。我不确定它在4.2中的相关性。

这太晚了，但对于任何需要另一行的人来说：

Ext.define('AM.view.user.List',{
   extend: 'Ext.grid.Panel',
   //other configs
   plugins: [{
      ptype: 'rowexpander',
      rowBodyTpl: ['<p><b>Field 1:</b> {field1}</p><br>',
                   '<p><b>Field 2:</b> {field2}</p>']
  }]
});

Ext.define（'AM.view.user.List'{
扩展：“Ext.grid.Panel”，
//其他配置
插件：[{
p类型：“行扩展器”，
rowBodyTpl:['字段1:{field1}

'，
“字段2:{field2}
”]
}]
});

这太晚了，但对于需要另一行的人：

Ext.define('AM.view.user.List',{
   extend: 'Ext.grid.Panel',
   //other configs
   plugins: [{
      ptype: 'rowexpander',
      rowBodyTpl: ['<p><b>Field 1:</b> {field1}</p><br>',
                   '<p><b>Field 2:</b> {field2}</p>']
  }]
});

Ext.define（'AM.view.user.List'{
扩展：“Ext.grid.Panel”，
//其他配置
插件：[{
p类型：“行扩展器”，
rowBodyTpl:['字段1:{field1}

'，
“字段2:{field2}
”]
}]
});

您应该包括您尝试的插件代码，并解释“无法使其工作”的含义。意外的行为？抛出异常？您应该包括您尝试的插件代码，并解释“无法使其工作”的含义。意外的行为？抛出异常？我需要在第二网格行rowBodyTpl请帮助我需要在第二网格行rowBodyTpl请帮助我