使用 RowExpander 将普通网格更改为网格

Posted 2023-02-26

【中文标题】使用 RowExpander 将普通网格更改为网格

【英文标题】：Changing a normal grid into a grid with RowExpander

【发布时间】：2013-07-30 20:03:01

【问题描述】：

所以我在这里有工作视图，可以很好地创建我的网格。

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); 

       
);

我想将网格中的每一行转换为可展开和可折叠，如 Sencha Docs 中 Row Expander 下所示：http://docs.sencha.com/extjs/4.2.1/#!/example/build/KitchenSink/ext-theme-neptune/

我已尝试添加插件，但无法使其正常工作。有什么想法吗？

【问题讨论】：

您应该包含您尝试过的插件代码并解释“无法使其工作”的含义。意外行为？抛出异常？

【参考方案1】：

像这样使用插件配置：

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

查看工作示例on jsFiddle。此外，Sencha Docs 在右侧提供了一个“代码预览”面板，显示他们使用的代码。

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

【讨论】：

我需要在第二个网格行 rowBodyTpl 请帮帮我

【参考方案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>']
  ]
);