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

二、只指定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'
		}]
	});
});

评论

3 楼 slmdyk 2008-08-13  

我怎么没有找到labelAlign:'right'，这个配置属性是从那儿来的！
我的邮箱是[e-mail]

2 楼 yahaitt 2008-05-31  

谢谢西门的建议，我会继续努力的：）

1 楼 西门一堆雪 2008-05-31  

如果把效果图贴出来，会更容易理解，支持MM！视频继续出吧！