PDA

View Full Version : Layout structure question



yogev
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.

Boston
10 Jul 2012, 4:29 AM
HI!

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

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

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



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

yogev
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'
}

Izhaki
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.