Ext UI设计

1.按钮：
var button=new Button({
   renderTo:Ext.getBody(),
   text:'确定'
});
alert(button.text);   //获取按钮文本
button.setText("取消");  //设置按钮上文本
button.minWidth(100);   //设置按钮最小宽度
handler:function(){}   //默认事件是click
listeners:{		//定义事件
    'click',function(){}
}

button.on('click',function(){});//ext传统写法 定义事件

2.文本框
new textField({
    renderTo:document.body,
    fieldValue:'姓名：'
})；//文本框必须在Ext.Container或者是Ext.Container的子类中才能显示fieldValue

3.面板
var _panel=new Ext.Panel({
			//renderTo:Ext.getBody(),
			layout:'form',
			title:'面板',
			labelWidth:30,
			frame:true,
			width:300,
			height:200,
			listeners:{
				'render':function(_panel){
					_panel.add({xtype:'textfield',fieldLabel:"密码"});  //xtype 在component中查找
					_panel.add(//运行时方法
						new Ext.form.TextField({
							id:'tt',
							value:'adfa',
							fieldLabel:"名字"
						})
					);
				}
			}
		});
		_panel.addButton({text:"确定"});    //设计时方法
		_panel.addButton(new Ext.Button({text:"取消",minWidth:100}));
		_panel.render(Ext.getBody());

renderTo与applyTo：
renderTo将当前对象放入指定的元素里面   也可render方法指定
applyTo在指定元素中构建对象             也可applyToMarkup

设定面板风格：
<style type="text/css">
		.contain{
			width:100%;
			height:100%;
			top:0;
			left:0;
		}
		.center{
			position:absolute;
			top:30%;
			left:43%;
			text-align:left;
		}
	</style>

 Ext.onReady(function(){
                var _panel=new Ext.Panel({
        			layout:'form',
        			title:'面板',
        			labelWidth:30,
        			frame:true,
        			width:300,
        			height:200
        		});

        		_panel.add(
        						new Ext.form.TextField({
        							id:'tt',
        							value:'adfa',
        							fieldLabel:"名字"
        						})
        					);

        _panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
        	tag:'div',
        	cls:'contain',
        	cn:[{
        		tag:"div",
        		cls:'center'
        	}]
        },true).child("div")) });


items和buttons的使用
var _panel=new Ext.Panel({
        			layout:'form',
        			title:'面板',
        			labelWidth:30,
        			frame:true,
        			width:300,
        			height:200,
					defaults:{xtype:'textfield',width:'180'},
					items:[{
						fieldLabel:'账户'
					},{
						fieldLabel:'密码'
					}],
					buttons:[{text:'确定'},{text:'取消'}]
        		});

4.window的使用

 			Ext.onReady(function(){

				var win2=new Ext.Window({
						layout:'form',
        				title:'登录',
        				labelWidth:30,
        				frame:true,
					resizable:false,//是否可以改变窗体大小
        				width:260,
					plain:true,//背景颜色强制化
					bodyStyle:'padding:5px',//离边部空3px
        				height:130,
					minimizable:true,//显示最小化按钮
					//maximizable:true,//显示最大化按钮
					defaults:{xtype:'textfield',width:'180'},
					buttonAlign:'center',//设置按钮的对齐方式
					closable:true,//是否可以关闭
					closeAction:'hide',//是否将窗体真正关闭   hide和close
						items:[{
							id:'name',
							xtype:'textfield',
							fieldLabel:"姓名"
						},{
							xtype:'textfield',
							fieldLabel:'密码'
						}],
					listeners:{
						"show":function(){
							//alert("窗体显示");
						},
						"hide":function(){
							alert("窗体隐藏");
						}
					},
						buttons:[{text:'确定',handler:function(){
								//alert(this.text);
								//this.ownerCt.items  这个window无法获取值
								var _coll=this.ownerCt.ownerCt.items;//获取拥有该控件的容器
								var _temp="";

								_temp+=_coll.first().getValue()+" ";
								_temp+=_coll.itemAt(1).getValue();
								alert(_temp);

								alert(Ext.getCmp('name').getValue());
							}}]
				});

			win2.show();
       });

window布局实例：
 Ext.onReady(function(){

				var win2=new Ext.Window({
						title:"添加人员",
						layout:'form',//窗体布局   textfield的fieldLabel属性要显示就采用此布局
						width:500,
						height:380,
						labelWidth:60,
						plain:true,
						style:'padding:5px',  //距容器边框距离
						bodyStyle:'padding:5px',//离边部空3px
						defaultType:'textfield',
						//defaults:{width:380},  //默认问文本框
						items:[{
							xtype:'panel',
							baseCls:"x-plain",   //panel面板中的强制    使色泽统一
							layout:'column',
							items:[{
								columnWidth:.5, //所占容器比例
								layout:"form",
								baseCls:"x-plain",
								labelWidth:60,
								bodyStyle:'padding:3px',
								defaults:{xtype:'textfield',width:150},
								items:[{
									fieldLabel:'姓名'
								},{
									fieldLabel:'年龄'
								},{
									fieldLabel:'出生日期'
								},{
									fieldLabel:'联系电话'
								},{
									fieldLabel:'手机号码'
								},{
									fieldLabel:'电子邮件'
								},{
									fieldLabel:'性别'
								}]
							},{
								columnWidth:.5,
								layout:'form',
								baseCls:"x-plain",
								labelWidth:60,
								items:[{
									xtype:'textfield',
									inputType:'image',  //password
									fieldLabel:'个人照片',
									height:180,
									width:150
								}]
							}]
						},{
							fieldLabel:'身份证',
							width:390
						},{
							fieldLabel:'地址',
							width:390
						},{
							fieldLabel:'职位',
							width:390
						}],
						showLock:false,
						listeners:{
							'show':function(_win){
								if(!_win.showLock){
									_win.findByType("textfield")[7].getEl().dom.src='1.gif';
									_win["showLock"]=true;
								}
							}
						},
						buttons:[{text:'确定',handler:function(){}},{text:'取消'}]
				});

				win2.show();
       });

运行效果：