RowPanelExpander for grids

[gurpal2000]

Hi

I put a grid inside a rowpanelexpander (ie. replaced your tabpanel with gridpanel). I added a rowclick listener to the outer grid. When i click on the rows inside my large grid, i get all sorts of weird behaviour with random rows being highlighted and erratic expand/collapse.

It's hard to explain but if i added a row listener to the inner grid, how would the outer grid know to highlight that large row?

createExpandingRowPanelItems: function(record, rowIndex) {
      var panelItems = [
        new Ext.grid.GridPanel({
          store: new Ext.data.Store({
            // blah
          }),
          ...
        })
        ...
      ]
   ...

var grid = blah // this uses the rowpanelexpander
grid.on('rowclick', etc)

Thanks

[steffenk]

sounds like you have somehow wrong references or simular ids. I have several components inside the panel, no problems.

[daiei27]

sounds like you have somehow wrong references or simular ids. I have several components inside the panel, no problems.

Nice demo. I wonder if you could switch the tab panels out for grid panels in your demo. That would be the true test of your plugin since that is where most problems arise.

I, for one, had problems similar to Gurpal2000 when using the RowExpander plugin. I'd happily switch to RowPanelExpander if I knew it would work right out of the box so I can get rid of my ugly workarounds.

Btw, thanks for the link from the other thread.

[daiei27]

Oh, 2 questions...

1. Does this plugin re-render the expanded area when closing and opening again? RowExpander seems to do this, meaning my grids are regenerated every time. There are pros (always up to date) and cons (unnecessary processing/delays) to this.

2. Has anyone tried using the "Header for RowExpander" with this plugin?
http://www.extjs.com/forum/showthread.php?t=92958

[pavanextjs]

great Plug-In, Thanks for sharing.

I am trying to use this plug-in in my application, this is awesome and fits into my application needs. But there is a problem when i try to use this with an EditorGridPanel for which i have editors in some of the cells (combo box, Date Field, checkcolumn).

Problem is...
When the expander is in expanded state, and i try to edit one of the cell either by selecting from a combo box or date Field and tab out, the expander panel just disappears and will not be there anymore. Same thing is happening when i try to check/un-check the check column.

I gave the screen shot for the reference.

Attachment 19849

Any ideas. I tried to debug but no luck. Thanks in advance.

[steffenk]

I'm sorry i didn't used it with editor grid before.

Most problems looks like events are catched by the grid. i often use event.stopPropagation() for inside elements to disable event bubbling.

Try to debug events to see what happens, paste following in firebug console:

Ext.util.Observable.prototype.fireEvent = Ext.util.Observable.prototype.fireEvent.createInterceptor(function() {
    console.log(arguments);
    return true;
}); 

[pavanextjs]

I'm sorry i didn't used it with editor grid before.

Most problems looks like events are catched by the grid. i often use event.stopPropagation() for inside elements to disable event bubbling.

Try to debug events to see what happens, paste following in firebug console:

Ext.util.Observable.prototype.fireEvent = Ext.util.Observable.prototype.fireEvent.createInterceptor(function() {
console.log(arguments);
return true;
}); 

Hi Steffen,

Thanks for the quick help and sorry for the late reply, was stuck with other work.

I was able to debug a little bit more by printing the events firing with the above code you have given.

I noticed...

1. 'update' event is firing on grid's store which in turn triggering the Grid View's 'rowupdated' UI event. I am suspecting this 'rowupdated' might be causing the issue by internally updating the row. Because, even though we have many rows in expanded state, only the edited/updated row's expander panel is disappering.

2. 'change' event is firing on the cell editor since we are modifying the data.

3. And there are other events related to 'mouse' are firing.

Can you please help me out more.

Thanks in advance.

[pavanextjs]

The rowupdated event is inturn calling the getRowClass(), which is trying to take the content from the plug-in and failing (It gets nothing from the plug-in) because there is no content as the rowupdated event cleared all the existing content while re-drawing the row.

[lingz_public]

I am also interested in this topic. Has the same problem for grid in expander....

[Boxcopter]

This is exactly what I need for my project, but I can't get toolbars to work within the panels. I am assuming they are not supported or is this a bug?

new Ext.ux.grid.RowPanelExpander({
        createExpandingRowPanelItems: function(record, rowIndex) {
            var panelItems = [
            new Ext.Panel({
                height: 200,
                autoScroll: true,
                record: record,
                tbar: new Ext.Toolbar({
                    items: [
                    {
                        xtype: 'tbbutton',
                        text: 'Edit',
                        icon: './resources/icons/page_white_edit.png'
                    }
                    ]
                }),
                html: record.data.desc
            })
            ]
            return panelItems;
        }
    });

Fixed this problem by adding the toolbar after the panel is created. Here is my code...

var mdlDescExpander = new Ext.ux.grid.RowPanelExpander({
        createExpandingRowPanelItems: function(record, rowIndex) {
            var text = record.data.desc;
            var desc = new Ext.Panel({
                layout: 'fit',
                autoScroll: true,
                maxHeight: 200,
                items: new Ext.Panel({
                    border: false,
                    frame: false,
                    autoHeight: true,
                    autoWidth: true,
                    autoScroll: true,
                    html: '<div style="padding:10px" class="clean_style">' + record.data.desc + '</div>'
                })
            });
            desc.elements += ',tbar';
            desc.topToolbar = new Ext.Toolbar({
                items: [
                {
                    xtype: 'tbtext',
                    text: 'Description'
                },
                {
                    xtype: 'tbtext',
                    text: '<img src="./resources/icons/line_break.png" />'
                },
                {
                    text: 'Open Editor',
                    icon: './resources/icons/page_white_edit.png',
                    handler: function() {
                        openTinyMCE('Model Description Editor', text);
                    }
                }
                ]
            });
            var panelItems = [desc]
            return panelItems;
        }
    });