透析Extjs源码之layout（二）FormPanel与FormLayout的关系

理解了layout之后，再看看FormPanel源码，发现它指定了layout:'form',而FormPanel又是Container的子孙类，所以，它就是用了FormLayout布局。只是通过FormPanel，将FormLayout所需要的配置都做了些初始化提取出来了，便于开发者使用和理解。所以，在FormPanel渲染后就会用FormLayout来进行doLayout功能。
所以写成下面两种方式的代码，效果是一样的：
一、用FormPanel

Js代码

1. Ext.onReady(function(){   
2.     var panel = new Ext.FormPanel({   
3.         renderTo:'hello',   
4.         title:'容器组件',   
5.         width:300,   
6.         hideLabels:false,   
7.         labelAlign:'right',   
8.         height:120,   
9.         defaultType:'textfield',   
10.         items:[{   
11.             fieldLabel:'请输入姓名',   
12.             name:'name'  
13.         },{   
14.             fieldLabel:'请输入地址',   
15.             name:'address'  
16.         },{   
17.             fieldLabel:'请输入电话',   
18.             name:'tel'  
19.         }]   
20.     });   
21. });  

Ext.onReady(function(){
	var panel = new Ext.FormPanel({
		renderTo:'hello',
		title:'容器组件',
		width:300,
		hideLabels:false,
		labelAlign:'right',
		height:120,
		defaultType:'textfield',
		items:[{
			fieldLabel:'请输入姓名',
			name:'name'
		},{
			fieldLabel:'请输入地址',
			name:'address'
		},{
			fieldLabel:'请输入电话',
			name:'tel'
		}]
	});
});

二、只指定layout:'form'

Js代码

1. Ext.onReady(function(){   
2.     var panel = new Ext.Panel({   
3.         renderTo:'hello',   
4.         title:'容器组件',   
5.         width:300,   
6.         layout:'form',   
7.         hideLabels:false,   
8.         labelAlign:'right',   
9.         height:120,   
10.         defaultType:'textfield',   
11.         items:[{   
12.             fieldLabel:'请输入姓名',   
13.             name:'name'  
14.         },{   
15.             fieldLabel:'请输入地址',   
16.             name:'address'  
17.         },{   
18.             fieldLabel:'请输入电话',   
19.             name:'tel'  
20.         }]   
21.     });   
22. });