我怎样才能给这个网格可扩展的行？ -Ext JS答案

【问题标题】：How can I give this grid expandable rows? -Ext JS我怎样才能给这个网格可扩展的行？ -Ext JS
【发布时间】：2013-08-17 01:20:17
【问题描述】：

我已经尝试了几乎所有方法来为这个网格提供可扩展的行。这是我的代码：

Ext.define('AM.view.metadata.List' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.metadatalist',
    title: '<center>Results</center>',
    store: 'Metadata', 
    requires: ['Ext.*'],    
    collapsible: true,
    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: 'Technical Name',  dataIndex: 'TECH_NAME', flex: 4, tdCls: 'grid_cell'},
            {header: 'KBE ID', dataIndex: 'KBE_ID', flex: 2, tdCls: 'grid_cell'},
            {header: 'KBE Name', dataIndex: 'KBE_NAME', flex: 3, tdCls: 'grid_cell'},
            {header: 'View Name', dataIndex: 'VIEW_NAME', flex: 4, tdCls: 'grid_cell'},
            {header: 'Database/Schema', dataIndex: 'DB_SCHEMA', flex: 3, tdCls: 'grid_cell'},
            {header: 'Privacy', dataIndex: 'PRIVACY_INDICATOR', flex: 3, tdCls: 'grid_cell'}
        ];

        this.callParent(arguments); //Calls the parent method of the current method in order to override 


    }
});

这是我在 app.js 中实例化它的地方

{ xtype: 'metadatalist', padding: '5px 5px 5px 5px', height: 430, width: '100%', hidden: true}

我已经尝试过 rowexpander 插件，但我不确定我是否把它放在了正确的位置。如果有人看到危险信号或可以帮助我解决如何实现此行扩展器，我将不胜感激。我已经发布了好几次关于这个的帖子，到目前为止，几乎没有得到任何帮助。我正在使用 Ext JS 4.1.1

谢谢！

【问题讨论】：

标签： extjs grid

【解决方案1】：

您需要在网格配置中拥有 rowexpander 插件，并且您需要为行展开时显示的信息创建一个 XTemplate。您是否尝试按照这个示例进行操作？

http://docs.sencha.com/extjs/4.2.1/#!/example/grid/grid-plugins.html

【讨论】：

它给了我'TypeError: name is undefined'，我已经尝试过很多次了
在我尝试放入行扩展器之前，一切都很好。我在某处缺少 Ext.requires 吗？
那么您是否可以在不使用行扩展器的情况下将数据加载到网格中？
是的，完美，它实际上是在尝试调用 'ptype: 'rowexpander' 来破坏应用程序
你能用插件定义和xtemplate展示完整的代码吗？也请显示模型的代码。

【解决方案2】：

事实证明，我需要设置我的加载器路径，以便它可以找到 RowExpander.js。这是我所做的：

Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux'); // change this for your environment

Ext.require([ 'Ext.ux.RowExpander' ]);

【讨论】：