View Full Version : Layout structure question

10 Jul 2012, 4:21 AM
Hi, I want to seperate panel styling *completely* from the view javascript file.

For example, if I have a panel like this:

xtype: 'panel',
cls: 'mypanel',
layout: {
type: 'vbox'
align: 'stretch'
height: 100,
width: 150

So I want the "vbox"+"stretch" layout will be configured through a CSS file (possibly through the class "mypanel"), also the height and width.
So can it be done?

Thanks ahead.

10 Jul 2012, 4:29 AM

Couldn't the config 'cls' be used for that?

10 Jul 2012, 4:42 AM
No, I didn't find a way to do it

10 Jul 2012, 5:02 AM
Did you try that?

{ xtype: 'panel', layout: { type: 'vbox'
cls: 'mypanel', align: 'stretch'
} }

10 Jul 2012, 5:10 AM
My wanted result is that everything regarding design will be in the CSS file and not defined in the view, like this:

xtype: 'panel',
cls: 'mypanel'

10 Jul 2012, 8:41 AM
ExtJS does some serious javascript work to render your layouts correctly on all browsers (including legacy ones, and the superb IE7). If you look at the generated DOM, you'll see plenty of element-level styles, like width and height, injected to ensure correct layouting.

I seriously question the rationale of falling on CSS for layouts, particularly as this is one of the trickiest things to achieve with html/css if cross-browser compatibility is anything to go by. Seriously, ExtJS is worth getting into for the layout features alone.

However, if you insist, you can just use a fit layout on your viewport, use templates to render the DOM and apply your own css style to what's inside. The source of Ext.tab.Bar (http://docs.sencha.com/ext-js/4-1/source/Bar.html#Ext-tab-Bar) would be a good place to start looking into how this is done.