如何为此网格提供可扩展行? -Ext JS

时间:2013-08-15 15:08:24

标签: extjs grid

我已经尝试过几乎所有东西都可以为这个网格提供可扩展的行。这是我的代码:

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插件,但我不确定我是否把它放在正确的位置。如果有人看到红旗或者可以帮我解决如何实现这个rowexpander,我将不胜感激。我已经多次发布这个,到目前为止几乎没有得到任何帮助。我正在使用Ext JS 4.1.1

谢谢!

2 个答案:

答案 0 :(得分:1)

您需要在网格配置中使用rowexpander插件,并且需要为展开行时显示的信息创建XTemplate。您是否尝试过这个例子?

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

答案 1 :(得分:0)

事实证明,我需要设置我的Loader路径,以便找到RowExpander.js。这就是我的所作所为:

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

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