How to use ExtJS plug-in "Row Expander" with a MODx grid?

293 Posts

Murray Reply #1, 12 years, 7 months ago

I'm looking to incorporate the row expander plugin into one of my grids.
The plugin example is here: http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/grid-plugins.html (It's the first example grid)
For a MODx example, have a peek at the System Settings page in the MODx manager. This is exactly what I'm after only I'm having trouble tracking down its location in the source as well.

I'm getting a bit confused translating the code on a couple of counts:
- The example isn't using the MVC style class templates that MODx does.
- The example is using a local store and I need to use the MODx connector Url.

Here's a simplistic example grid:

Example.grid.Artworks = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        id: 'example-grid-artworks'
        ,url: Example.config.connectorUrl
        ,baseParams: { action: 'mgr/example/getListArtworks' }
        ,fields: ['id','name','description','menu']
        ,paging: true
        ,pageSize: 5
        ,remoteSort: true
        ,autoExpandColumn: 'description'
        ,columns: [{
            header: _('id')
            ,dataIndex: 'id'
        },{
            header: _('example.artwork_name')
            ,dataIndex: 'name'
        },{
            header: _('example.artwork_desc')
            ,dataIndex: 'name'
        }]
    });
    Example.grid.Artworks.superclass.constructor.call(this,config)
}
Ext.extend(Example.grid.Artworks,MODx.grid.Grid);
Ext.reg('example-grid-artworks',Example.grid.Artworks);

If anyone has the know-how and the time, could you show me how to make the appropriate changes?

Cheers!

This question has been answered by muzzstick. See the first response.

I'm lead developer at Digital Penguin Creative Studio in Hong Kong. https://www.digitalpenguin.hk
Check out the MODX tutorial series on my blog at https://www.hkwebdeveloper.com

293 Posts

Murray Reply #2, 12 years, 7 months ago

Ok I've gotten a bit further! Almost there.

I found the modx dashboard widgets source which showed it to be much easier than I thought it would be. My grid so far:

Example.grid.Artworks = function(config) {
    config = config || {};

    // ---- This gets added here ------
    this.exp = new Ext.grid.RowExpander({
        tpl : new Ext.Template(
            '<p>{expandedcontent}</p>'
        )
    });

    Ext.applyIf(config,{
        id: 'example-grid-artworks'
        ,url: Example.config.connectorUrl
        ,baseParams: { action: 'mgr/example/getListArtworks' }
        ,fields: ['id','name','description','menu']
        ,paging: true
        ,pageSize: 5
        ,remoteSort: true
        ,autoExpandColumn: 'description'
        ,plugins: [this.exp] // <---- add this here
        ,columns: [this.exp,{ // <----- add this here
            header: _('id')
            ,dataIndex: 'id'
        },{
            header: _('example.artwork_name')
            ,dataIndex: 'name'
        },{
            header: _('example.artwork_desc')
            ,dataIndex: 'name'
        }]
    });
    Example.grid.Artworks.superclass.constructor.call(this,config)
}
Ext.extend(Example.grid.Artworks,MODx.grid.Grid);
Ext.reg('example-grid-artworks',Example.grid.Artworks);

It works! Although it simply just expands the row a little. Now I need to work out how to values from my database into the {expandedcontent} section at the top.
It's probably quite simple but still learning!

Anyone know?

I'm lead developer at Digital Penguin Creative Studio in Hong Kong. https://www.digitalpenguin.hk
Check out the MODX tutorial series on my blog at https://www.hkwebdeveloper.com

discuss.answer

293 Posts

Murray Reply #3, 12 years, 7 months ago

All good! I just forgot to put the extra field in. i.e. 'expandedcontent'
Working perfectly now and ridiculously easy once you know what to do (not so easy finding out how)
I think I'll write a tutorial once I'm all done with this.

I'll leave this here if anyone faces the same problem:

Example.grid.Artworks = function(config) {
    config = config || {};
 
    // ---- This gets added here ------
    this.exp = new Ext.grid.RowExpander({
        tpl : new Ext.Template(
            '<p>{expandedcontent}</p>'
        )
    });
 
    Ext.applyIf(config,{
        id: 'example-grid-artworks'
        ,url: Example.config.connectorUrl
        ,baseParams: { action: 'mgr/example/getListArtworks' }
        ,fields: ['id','name','description','expandedcontent','menu'] // <--- added the expandedcontent field here
        ,paging: true
        ,pageSize: 5
        ,remoteSort: true
        ,autoExpandColumn: 'description'
        ,plugins: [this.exp] // <---- add this here
        ,columns: [this.exp,{ // <----- add this here
            header: _('id')
            ,dataIndex: 'id'
        },{
            header: _('example.artwork_name')
            ,dataIndex: 'name'
        },{
            header: _('example.artwork_desc')
            ,dataIndex: 'name'
        }]
    });
    Example.grid.Artworks.superclass.constructor.call(this,config)
}
Ext.extend(Example.grid.Artworks,MODx.grid.Grid);
Ext.reg('example-grid-artworks',Example.grid.Artworks);

I'm lead developer at Digital Penguin Creative Studio in Hong Kong. https://www.digitalpenguin.hk
Check out the MODX tutorial series on my blog at https://www.hkwebdeveloper.com

Answered How to use ExtJS plug-in "Row Expander" with a MODx grid?