PDA

View Full Version : layout problem



newusername
5 Apr 2013, 2:52 AM
Hi , I am getting problem with vbox layout .
I simply put a Panle having layout form inside a panel having layout 'vbox'. Problem is : if I don't give width and height to container having vbox layout
then it dispalys nothing and there is no error. If I provide height and width then it works fine. I am not able to understand why it requires height and width.




var panel1 = new Ext.Panel({

layout:'form',
flex:1,
//border:true,
//bodyBorder : true,
defaults :{
//margins:{top:10, right:10, bottom:10, left:10}
flex:1
},
//padding:10,
items:[
{
fieldLabel : 'First Name',
xtype : 'textfield',
name : 'FName',
allowBlank : false,
}, {
fieldLabel : 'Last Name',
xtype : 'textfield',
name : 'LName',
allowBlank : false,
}, {
fieldLabel : 'Email',
xtype : 'textfield',
name : 'email',
allowBlank : false,
}, {
fieldLabel : 'DOB',
xtype : 'datefield',
name : 'dob',
allowBlank : false,
} ]


})






Ext.onReady(function(){


var vboxPanel = new Ext.Panel({
layout : 'vbox',
//border:false,
//align:'stretch',
//bodyBorder : false,
height : 200,
width:500,
items : [panel1],
renderTo:Ext.getBody()



})


});

willigogs
5 Apr 2013, 6:19 AM
Try adding the following to your vbox panel:


layoutConfig: {
align: 'stretch'
}

newusername
5 Apr 2013, 7:30 AM
Hi Willi,

I tried your option but till it is not working.

willigogs
5 Apr 2013, 7:34 AM
In that case it might be due to panel1 having a layout of 'form'.

Try wrapping your panel1 with a container which uses a 'fit' layout.

If that doesn't work I'll actually try and diagnose it in more depth :)

newusername
5 Apr 2013, 7:48 AM
I tried it too. But still no luck . I would like mention one thing that , with initial code if I apply height and width to vboxPanel then it works fine. I wanted to know that why it requires height and width ..

willigogs
5 Apr 2013, 7:50 AM
Sorry - just realised I was missing something ridiculously obvious :D

You need to give the child panels a "flex" value :)

newusername
5 Apr 2013, 7:51 AM
Willi if you see , I have already applied flex value for panel1 and even childs of panel1

willigogs
5 Apr 2013, 8:01 AM
I added the layoutConfig option that I mentioned earlier, and it seems to work correctly?

http://jsfiddle.net/Whinters/u4QGD/

newusername
5 Apr 2013, 8:04 AM
Willi that is what I am saying . It works fine when you apply height and width . So does it mean that vbox requires height and width explicitly ?

willigogs
6 Apr 2013, 3:06 AM
Hmm, yes I see what you mean now...

I've never encountered this issue before, since all my EXT applications always use viewports - but it certainly seems a requirement for the vbox/hbox layout to be given a height/width value in this scenario.

I'll have a further play with some code later just to double check if there's a solution to this I'm missing.