EXT笔记06制作添加框

EXT中除了原有的from布局以外还有一个column布局也就是列布局。如果要在一个windowUI中实现一个复杂一些的布局。需要在一个window中加入一些面板。

那么需要在一个items中放入panel也就是面板，而且window控件中默认的items中的UI默认是panel。panel中的如果要想将一个面板的背景色也强制指定使用baseCls:'x-plain'属性（作用在面板元素上的CSS样式类）。例子代码：

 

<script>
			Ext.onReady(function(){
					new Ext.Window({
						modal:true,
						title:'添加用户',
						resizable:false,
						width:500,
						layout:'form',
						bodyStyle: 'padding:5px 5px 0',
						labelWidth:60,
						height:240,
						plain:true,
						buttonAlign:'center',  
						items:[{
							baseCls:'x-plain',
							layout:'column',
							items:[{
								 labelWidth:60,
								 layout:'form',
								 baseCls:'x-plain', 
								 columnWidth:.5,	 	
								 defaultType:'textfield',
								 items:[{
								 	fieldLabel:"姓名"
								 },{
								 	fieldLabel:"性别"
								 },{
								 	fieldLabel:"出生日期"
								 },{
								 	fieldLabel:"地址"
								 }]
								   
							},{
								baseCls:'x-plain',
								labelWidth:60,
								layout:'form',
								columnWidth:.5,
								defaultType:'textfield',
								items:[{
									fieldLabel:"照片",
									inputType :"image",
									width:120,
									height:100 
								}]	
							}]							
						},{
							xtype:'textfield',
							fieldLabel:"详细地址",
							width:410
						},{
							xtype:'textfield',
							fieldLabel:"关系",
							width:410
						}],
						buttons:[{text:"确定"},{text:"取消"}],
						listeners:{
							"show":function(_window)
							{
								
								_window.findByType('textfield')[4].getEl().dom.scr="a.gif";
								
							}
						}  
					}).show();
			});
			
		</script>

 

 这个代码中是把一个windowUI中items数组中先加入一个面板，再在这个面板中的布局模式设置成列模式。在带这个面板中的items中指定两个面板。这样两个面板像两个列一样并列。在带WINDOWUi中的第一个panel中在指定两个文本框UI。在存放照片的面板中我们指定了一个文本框。文本框UI中的inputType属性可以指定文本框的类型可以使用html的input的类型。

（"input"类表单元素的类型属性 -- 例如：radio,text,password （默认为"text"））。

如果我们像控制这个文本框的SRC的化我们需要利用findByType方法获得某一个EXT类型的EXT元素然后在利用getEl()方法获得EXT对象，如果要获得一个DOM元素需要DOM属性。

例子效果：

见1.bmp.