View Full Version : Panel with 100% width

5 Sep 2013, 9:23 AM
I am upgrading a system from ExtJS 3.4.0 to 4.2.0. For reasons unrelated to Ext, we are NOT using the Ext MVC framework; we are just rendering individual Ext objects into specific divs using the renderTo property. At this point, we aren't going to switch over to the MVC framework, so I am trying to figure out how to get the objects to work properly without it.

Formerly with 3.2.0, we would render a panel into a div and it would have no width, which meant it essentially had 100% width by default. If the page was resized, since the x-panel, x-panel-bwrap, x-header, and x-panel-body divs did not have a width, they just resized along with the window / their parent containers.

Now, using 4.2.0, it seems like every div has an explicit width. I can set the property width: '100%' in the panel, but it doesn't make a difference since the x-panel-body and x-panel-header divs still have explicit widths set. I've tried adding classes to the header/body and adding properties such as bodyStyle: { width: '100%' } but they always get overwritten with an explicit width. The way I have it working right now is to manually call doLayout() on every panel using Ext.EventManager.onWindowResize, but as I add more panels, it is more difficult to keep track of them. Relying on the onWindowResize event is also making the resizing very jerky compared to simply having all the widths set to 100%. Is there a way to do this that I'm missing?

EDIT: I am also running into the same problem with form fields, so if there was a solution I could use with both, that'd be great.

6 Sep 2013, 3:02 AM
If you want to have shrink-wrap with css only, you must not use anything heavier then container with 'auto' layout, dataview and general component. All other widgets require layout hacking or fixed sizes.