layout problem

[newusername]

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]

Try adding the following to your vbox panel:

layoutConfig: {
    align: 'stretch'
}

[newusername]

Hi Willi,

I tried your option but till it is not working.

[willigogs]

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]

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]

Sorry - just realised I was missing something ridiculously obvious

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

[newusername]

Willi if you see , I have already applied flex value for panel1 and even childs of panel1

[willigogs]

I added the layoutConfig option that I mentioned earlier, and it seems to work correctly?

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

[newusername]

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]

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.