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

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

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'
        }]
    });
});

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'

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