PDA

View Full Version : hbox layout



nick saint
19 Apr 2010, 3:53 AM
Hi, I am trying to do the hbox layout but something comes wrong with flex parametr


Ext.onReady(function(){

new Ext.Viewport({
layout: 'border',
items: [{
region: 'center',
border: false,
margins: '0 0 0 0',
layout: 'fit',
items:[{
anchor:'100%',
baseCls:'x-plain',
layout:'hbox',
layoutConfig: {
align: 'stretch'
},
defaults:{
border: false
},
items: [{
bodyStyle:'background: green;',
width: 1,
flex: 1
},{
width: 900,
border: false,
layout: 'fit',
padding: '0 0',
bodyStyle:'background: red;'
},{
bodyStyle:'background: green;',
width: 1,
flex: 1
}]
}]
}]
});
}); // end

It use to work with 3.1.
Thank you for helping
Nick

Animal
19 Apr 2010, 4:35 AM
Using sane code I see nothing wrong:



Ext.onReady(function(){
new Ext.Viewport({
layout: {
type: 'hbox'
align: 'stretch'
},
defaults:{
border: false
},
items: [{
bodyStyle:'background: green;',
flex: 1
},{
width: 900,
border: false,
padding: '0 0',
bodyStyle:'background: red;'
},{
bodyStyle:'background: green;',
flex: 1
}]
});
});

nick saint
19 Apr 2010, 5:13 AM
Thank you. Your code is different and it does work. Thank you

nick saint
21 Apr 2010, 2:11 AM
Sorry, how do I make BODY scollable? I have set autoScroll: true but it did not help.


Ext.onReady(function(){

new Ext.Viewport({
autoScroll: true,
layout: {
type: 'hbox',
align: 'stretch'
},
defaults:{
border: false
},
items: [{
bodyStyle:'background: #FFFFFF;',
flex: 1
},{
width: 918,
cls: 'wPage',
border: false,
padding: '0 10 0 8',
bodyStyle:'background: #FFFFFF url(resources/images/web/bg/body_bg.png) repeat-y;',

layout: {
type: 'vbox',
align: 'stretch'
},
defaults:{
border: false,
width: 900
},
items: [{
height: 60,
bodyStyle:'background: red;'

},{
height: 900, // a part of this is hidden
border: false,
padding: '0 0',
flex: 1,
bodyStyle:'background: green'

},{
height: 40,
bodyStyle:'background: blue;'
}]

},{
bodyStyle:'background: #FFFFFF;',
flex: 1
}]
});

});

May be I do it in the wrong way?
Thank you for help
Nick

Animal
21 Apr 2010, 2:15 AM
align: stretch

Think about it.

They are all exactly the height of the body. So it won't scroll.

Animal
21 Apr 2010, 2:15 AM
align: stretch

Think about it.

They are all exactly the height of the body. So it won't scroll.

nick saint
21 Apr 2010, 2:24 AM
I have taken align: stretch off but did not help. I have played with it this and that way but it remains the same.

Animal
21 Apr 2010, 2:43 AM
So now there are all height: 0 and you can't see any of them, and there's nothing to scroll.

nick saint
21 Apr 2010, 2:52 AM
Ok, thank you. I got it.