CODEWITHSUNDEEP
extjsgrid
Clay Banks
Clay Banks

Reputation: 4581

How can I give this grid expandable rows? -Ext JS

I have tried just about everything to give this grid expandable rows. Here's my code:

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 


    }
});

And here's where I instantiate it in my app.js

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

I have tried the rowexpander plugin, but I'm not sure if I put it in the right place. If anyone sees a red flag or can help me out with how to implement this rowexpander, I would greatly appreciate it. I've posted several times about this, and so far have received little to no help. I'm using Ext JS 4.1.1

Thank you!

Upvotes: 1

Views: 3137

Answers (2)

Clay Banks
Clay Banks

Reputation: 4581

As it turned out, I needed to set my Loader path so that it could find RowExpander.js. Here's what I did:

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

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

Upvotes: 0

bakamike
bakamike

Reputation: 1024

You need to have the rowexpander plugin in the grid configuration and you need to create an XTemplate for the information presented when the row is expanded. Did you try and follow this example?

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

Upvotes: 1

Related Questions