RowPanelExpander for grids

[Condor]

You shouldn't need to stop the event if you configure your cellSelectorDepth, rowSelectorDepth and rowBodySelectorDepth correctly.

[Animal]

Your onDestroy needs to destroy all the cached Panels.

[boriss]

Your onDestroy needs to destroy all the cached Panels.

You mean the ones in this.expandingRowPanel? If this is required it should actually be done by onDestroy() in RowPanelExpander (so the class can clean up its own cached panels)?

[boriss]

You shouldn't need to stop the event if you configure your cellSelectorDepth, rowSelectorDepth and rowBodySelectorDepth correctly.

I tried it but unfortunately it doesn't work. But looking at the code in GridView I'm not sure either how these settings are relevant to event bubbling?

[Animal]

Yes.

[Condor]

They are not relevant to event bubbling, but if a cell or row is not found within the specified depth the event is not treated as a cell/row event.

[boriss]

They are not relevant to event bubbling, but if a cell or row is not found within the specified depth the event is not treated as a cell/row event.

I don't understand how the part "if a cell or row is not found" applies here. For example if I move the mouse pointer over some rows in an inner grid the very same rows in the outer grid are highlighted. Which cells or rows are not found here that you think setting cellSelectorDepth, rowSelectorDepth and rowBodySelectorDepth helps?

[boriss]

Does anyone know how to set the height of an inner grid? If I pass eg. "height: 300" to the inner grid and open the row expander there is a grid with that height. However it's empty (I see a white empty box now). If I don't set the height everything works automatically (rows are loaded and height is somehow automatically calculated).

The reason why I want to set the height is that some of my inner grids indeed have no rows. As I provide a button to add rows the inner grid should have a minimum height (otherwise a row is inserted but you can't see nor edit it).

[boriss]

Does anyone know how to set the height of an inner grid? If I pass eg. "height: 300" to the inner grid and open the row expander there is a grid with that height. However it's empty (I see a white empty box now). If I don't set the height everything works automatically (rows are loaded and height is somehow automatically calculated).

Meanwhile I can refine the problem: Setting height of an inner grid basically works. What does not work is: Top and bottom toolbars (tbar and bbar) are not displayed. There is some space allocated but it's empty (white). Looking around in the debugger I see that the toolbars' width is set to 0. The divs with the classes "x-panel-tbar x-panel-tbar-noheader" and "x-toolbar x-small-editor x-toolbar-layout-ct" have both a width of 0px. If I change the width in the debugger the toolbars become visible. Somewhere the width is wrongly calculated. This only happens in the toolbars though - the panel's body has the expected width.

I'll continue debugging tomorrow. I appreciate any ideas of what could be wrong though. For example where do toolbars get the width from? It doesn't seem to be set in the render functions in Ext.Toolbar. Is it done in Ext.grid.GridPanel or Ext.grid.GridView?

[boriss]

I'm finally able to describe the problem exactly and propose a fix. Have a look at this pseudocode:

var expander = new Ext.ux.grid.RowPanelExpander({ 
  createExpandingRowPanelItems: function(record, rowIndex) { 
    return [ 
      new Ext.grid.GridPanel({ 
        height: 100, 
        tbar: new Ext.Toolbar(...), 
        bbar: new Ext.Toolbar(...) 
      }) 
    ] 
  } 
});

When a grid panel is embedded in the row panel expander and a height is set, no top and bottom bars will be displayed. The reason is that somewhere in the grid panel when the toolbars are resized the offsetWidth of the grid panel is read. However this all happens before the row panel is actually expanded and visible - which means offsetWidth is 0!

Here are the details:

RowPanelExpander calls in expandRow() beforeExpand() which again calls createExpandingRowPanel(). Here components like our GridPanel are created. expandRow() calls beforeExpand() though before this line is executed:

Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');

Only then the row panel becomes visible (and reading attributes like offsetWidth makes sense).

Why is this a problem with toolbars in a grid panel? onRender() in GridPanel calls afterRender(). The call is forwarded a few times to afterRender() in BoxComponent (a parent class). BoxComponent calls setSize() to change the height of the grid panel (we set a height of 100). As a dimension is set explicitly onResize() gets called. And onResize() in Panel (another parent class of GridPanel) wants to set the toolbars' width. As it needs to use a value it reads this.body.dom.offsetWidth (line 1483 in Panel.js). But as nothing is visible yet offsetWidth is 0 and the width of the toolbars set to 0.

The quick fix is to move the call to replaceClass() in expandRow() in RowPanelExpander before beforeExpand(). Then any components which need to read attributes like offsetWidth get reasonable values and can be outlined correctly.