PDA

View Full Version : Help with layouts - ux.row layout - issues with local layout browser as well



Eric.Sencha
16 Sep 2010, 11:34 AM
Hello,

I am trying to get a simple layout with the following two panels taking up the entire viewport:

Panel-A 20% height, 100% width
Panel-B <Remaining> height, 100% width

I am trying to use the ux.row layout for the viewport but am getting the following message:

Ext.Container.LAYOUTS[this.layout.toLowerCase()] is not a constructor
chrome://firebug/content/blank.gif

Ext.DomHelper=function(){var w=null,k=...lclick",this.onNodeDblClick,this)}});

some stuff i read online seems to indicate that the ux.row layout cannot be found?

I have attached initial stab at coding HTML with inline JS

Thanks for any pointers.

PS: when i browse the api docs locally to the ext layout browser no layouts are listed to select.
Could this be a browser config issue?

-Eric

troseberry
16 Sep 2010, 11:48 AM
How about trying something like this. Very basic but you might get the point. The big difference is that I use the "border" layout and specify the "region" of the panel. The reason you get the error message as described above I would think because you never actually include any ux extension that specifies that layout type.


Ext.onReady(function()
{
// console.info('woohoo!!!');
// Configure viewport
viewPort = new Ext.Viewport(
{
layout:'border',
items:
[
{
title: 'Height = 20%',
region: 'west',
width: '20%',
html:'<p>top</p>',
bodyStyle:'background-color:yellow'
},
{
title: 'Height = 80%',
region: 'center',
width: '80%',
html:'<p>bottom</p>',
bodyStyle:'background-color:red'
}
]
});
});

Animal
16 Sep 2010, 11:52 AM
{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch',
padding: 5
},
items: [{
title: 'Top',
flex: 2,
margins: '0 0 2 0'
}, {
title: 'Bottom',
flex: 8,
margins: '3 0 0 0'
}]
}

Eric.Sencha
16 Sep 2010, 12:08 PM
Thanks for the quick responses guys,

I will try both your examples post haste.

Just to be thorough/retentive - how do i include the "Ext.ux.layout.RowLayout"
shown in the layout examples at: http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html

I think i am missing that part... just learning extjs this week.

thanks again,

-Eric

troseberry
16 Sep 2010, 12:14 PM
Just include this script tag in the head section of the page just like in the example. Then you can use the layout and the config options presented in the example.


<script type="text/javascript" src="../ux/RowLayout.js"></script>

Animal
16 Sep 2010, 12:23 PM
Do not use RowLayout. It is not supported.

VBoxLayout does exactly what you want, as I illustrated.

Eric.Sencha
16 Sep 2010, 12:24 PM
I found that script under .\ext-3.2.1\examples\ux\RowLayout.js - is that the only place that .js file should be?

I also notice when i launch the help from my local files that the layoutbrowser doesn't have any layouts listed??

Should i just copy the .\ext-3.2.1\examples\ux\RowLayout.js to .\ext-3.2.1 and link it there?

Thanks again.

Eric

Eric.Sencha
16 Sep 2010, 12:28 PM
Animal,

Sencha.com demos the RowLayout in their LayoutBrowser examples - it was from their examples and docs that I started looking at it.

Should it be redacted from the examples if it's not supported? is it so new it's not supported yet?

again thanks for all the help - i will try your solution this evening after work

-Eric

Animal
16 Sep 2010, 9:12 PM
It's so *old* that it should be removed. It is entirely replaced by vbox.