1. #11
    Sencha User
    Join Date
    Nov 2007
    Posts
    50
    Vote Rating
    0
    gurpal2000 is on a distinguished road

      0  

    Default nested grid problem

    nested grid problem


    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?

    Code:
    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

  2. #12
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,656
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    sounds like you have somehow wrong references or simular ids. I have several components inside the panel, no problems.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #13
    Sencha User
    Join Date
    Mar 2010
    Posts
    83
    Vote Rating
    -1
    daiei27 is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by steffenk View Post
    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.

  4. #14
    Sencha User
    Join Date
    Mar 2010
    Posts
    83
    Vote Rating
    -1
    daiei27 is an unknown quantity at this point

      0  

    Default


    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

  5. #15
    Ext JS Premium Member pavanextjs's Avatar
    Join Date
    Jul 2008
    Posts
    118
    Vote Rating
    2
    pavanextjs is on a distinguished road

      0  

    Exclamation Great Plug-In, little problem...

    Great Plug-In, little problem...


    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.
    Attached Images

  6. #16
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,656
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    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:
    PHP Code:
    Ext.util.Observable.prototype.fireEvent Ext.util.Observable.prototype.fireEvent.createInterceptor(function() {
        
    console.log(arguments);
        return 
    true;
    }); 
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  7. #17
    Ext JS Premium Member pavanextjs's Avatar
    Join Date
    Jul 2008
    Posts
    118
    Vote Rating
    2
    pavanextjs is on a distinguished road

      0  

    Default


    Quote Originally Posted by steffenk View Post
    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:
    PHP Code:
    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.

  8. #18
    Ext JS Premium Member pavanextjs's Avatar
    Join Date
    Jul 2008
    Posts
    118
    Vote Rating
    2
    pavanextjs is on a distinguished road

      0  

    Default


    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.

  9. #19
    Ext User
    Join Date
    Jan 2010
    Posts
    20
    Vote Rating
    0
    lingz_public is on a distinguished road

      0  

    Default


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

  10. #20
    Ext User
    Join Date
    Feb 2010
    Location
    Charlottesville, VA, USA
    Posts
    33
    Vote Rating
    0
    Boxcopter is on a distinguished road

      0  

    Lightbulb


    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?

    Code:
    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...
    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;
            }
        });