RowPanelExpander for grids

[vector3d]

I have the same problem.
My case is: a GridPanel in RowExpander of EditorGridPanel if store of "main" EditorGridPanel makes update (after edit or after set data in store) the content of RowExpander disappears...

How to fix this issue? Please Help!!!

[steffenk]

@pavan:
just use the events inside the plugin code. Debug them from there, decide if row is expanded and if you want to let pass them through to parent.

For example look to onMouseDown in plugin as example.

Remember that you are always in a grid, all events of a grid are used, and having grid in grid may cause problems for sure, so you have to take care manually.

[Sesshomurai]

Here's a little trick I thought up and steffenk helped me with in another thread that is useful here.

Basically, if you want your expanded row panel to be resizable vertically, you can add a resizable bar on the south.

        var expander = new Ext.ux.grid.RowPanelExpander({
            createExpandingRowPanelItems: function(record, rowIndex){


                var panelItems = [
                new Ext.TabPanel({
                    plain: true,
                    activeTab: 0,
                    height:'fit',
                    width:'fit',
                    defaults: {
                        autoHeight: true,
                        autoWidth:true
                    },
                    record: record,
                    listeners: {
                        render: function() {
                            var resizer = new Ext.Resizable(this.getEl(), {
                                handles: 's',
                                minWidth: 200,
                                height:100,
                                minHeight: 100,
                                maxWidth: 800,
                                maxHeight: 600,
                                pinned:true
                            });

                        }
                    },

                    items:[
                    {
                        xtype   : 'mediapanel',
                        id      : Ext.id(),
                        iconCls : 'icon-view',
                        title:'Quick View',
                        disableCaching : false,
                        mediaCfg:{
                            mediaType  :'HTM',
                            unsupportedText : 'IFrames are not supported by your browser.',
                            url         :"jsp/get-media.jsp?"+wrap+"object="+record.data.data+"&inline=true&repository="+record.data.repository+"&type="+record.data.mime
                        }
                    },
                    {
                        title:'Related',
                        iconCls:'icon-reports',
                        height:'fit'
                    }
                    ]
                })
                ];
                return panelItems;
            }
        });

Its useful if you are viewing content and so forth in the row.

[amsoft]

I also interested in this topic. Can you fix the problem with EditorGridPanel, please?

[383257357@qq.com]

请原谅我不会说英文。我之前也向里面嵌套过一个表格，但是我却无法给每个表格显示不同的数据，这是让我最头痛的一件事。不过还是感谢你的分享。

[dawesi]

great extension... :-)

[mrusinak]

I have the same problem.
My case is: a GridPanel in RowExpander of EditorGridPanel if store of "main" EditorGridPanel makes update (after edit or after set data in store) the content of RowExpander disappears...

How to fix this issue? Please Help!!!

After some investigating, the problem appears to be (in 3.2.1 anyway) that when rows are removed or re-rendered (such as during an update), the existing rowbody's panel is not removed.

My fix for when a row is updated changes the createExpandingRowPanel function to delete the existing panel and render a new one if an entry for that ID already exists, instead of ignoring creation:

createExpandingRowPanel : function(record, rowBody, rowIndex) {

    // record.id is more stable than rowIndex for panel item's key; rows can be deleted.
    var panelItemIndex = record.id;
    // var panelItemIndex = rowIndex;

    // init array of expanding row panels if not already done
    if (!this.expandingRowPanel) {
        this.expandingRowPanel = [];
    }

    // Destroy the existing panel if present
    if (this.expandingRowPanel[panelItemIndex]) {
        this.expandingRowPanel[panelItemIndex].destroy();
    }
    this.expandingRowPanel[panelItemIndex] = new Ext.Panel({
        border : false,
        bodyBorder : false,
        layout : 'fit',
        renderTo : rowBody,
        items : this.createExpandingRowPanelItems(record, rowIndex)
    });
},

The fix for row deletion I used was this, also shown with a fix to have the correct expanded/collapsed state after an update:

onRender : function() {
    var grid = this.grid;
    var mainBody = grid.getView().mainBody;
    mainBody.on('mousedown', this.onMouseDown, this, {
        delegate : '.x-grid3-row-expander'
    });
    grid.getView().on('rowremoved', this.onRowRemoved, this);
    grid.getView().on('rowupdated', this.onRowUpdated, this);
    if (this.expandOnEnter) {
        this.keyNav = new Ext.KeyNav(this.grid.getGridEl(),
                {
                    'enter' : this.onEnter,
                    scope : this
                });
    }
    if (this.expandOnDblClick) {
        grid.on('rowdblclick', this.onRowDblClick, this);
    }
},

// This will not get fired for an update
onRowRemoved: function(view, row, rec) {
    var panelItemIndex = rec.id;
    
    if (this.expandingRowPanel && this.expandingRowPanel[panelItemIndex]) {
        this.expandingRowPanel[panelItemIndex].destroy();
        this.expandingRowPanel[panelItemIndex] = null;
    }
},

onRowUpdated: function(view, row, rec) {
    if (typeof row == 'number') {
        row = this.grid.view.getRow(row);
    }

    this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'collapseRow' : 'expandRow'](row);
},

[amsoft]

Thanks a looooot=)

[youngqj]

Great! Thanks for share!

[innerbreath]

Hi,

I am trying to use the RowPanelexpander. It works in FF with grid.autoheight:true but not in IE.

Any help would be greatly appreciated.

Thanks,

Kamal.