PDA

View Full Version : Dynamically Resizable GridPanels?



Emmett
26 May 2011, 9:33 AM
I want to have:

- Two Ext.grid.GridPanel grids side by side so that each takes up half of the web browser window and both of them together take up the whole width.
- When the user resizes the browser window, the grids resize accordingly.
- There is a minimum width of ~800 pixels. If the user resizes the browser window to be smaller than this, then scroll bars will appear, and the user will have to scroll to see everything. The grids won't resize smaller than the minimum width.

I can get this working with CSS layout and static text blocks like this, but I can't figure out how to get this to work with Ext-JS GridPanel components. I've tried enclosing Panels, Ext-JS layouts, ViewPorts, and I can't get them to work correctly.

FYI, I'm using Ext-JS 3.3.x and I am not allowed to upgrade to 4.x

Here is my HTML + CSS + static text solution:


<body>
<div style="min-width: 800px;">
<div style="float: left; width: 50%; padding-top: 10px; padding-bottom: 10px;">
lots of static text in the left column goes here.
</div>

<div style="float: left; width: 50%; padding-top: 10px; padding-bottom: 10px;">
lots of static text in the right column goes here.
</div>
</div>
</body>

skirtle
28 May 2011, 10:26 AM
Could you not just put renderTo on both your GridPanels and inject them into your two DIVs?

If you want to use Ext layouts you'd need a surrounding container with an hbox layout and equal flex values on both GridPanels. I can't see an easy way to impose a minimum width using Viewport so I'd probably just use a surrounding DIV like you have. Note however that min-width is not supported in old browsers (including IE6) so you'll need to be sure which browsers you're targeting before using it.

I can expand upon this second approach more if needed but I really wouldn't bother making things that complicated if you can get away with just using renderTo and a couple of DIVs.