Ext.Window实例

 

<script type="text/javascript">
  	Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
  		Ext.onReady(function(){
  			var window = new Ext.Window({
  				title:'测试窗口',
  				width:500,
  				height:350,
  				closeAction:'hide',
  				plain:true,
  				layout:'form',
  				items:[{
  					layout:'column',
  					style:'padding:8px;',
  					baseCls:'x-plain',
  					items:[{
  						layout:'form',
  						columnWidth:0.5,
  						baseCls:'x-plain',
  						labelWidth:55,
  						items:[{
  							xtype:'textfield',
  							fieldLabel:'姓名',
  							anchor:'90%'
  						},{
  							id:'age',
  							xtype:'textfield',
  							fieldLabel:'年龄',
  							anchor:'90%'
  						},{
  							xtype:'datefield',
  							fieldLabel:'出生日期',
  							readOnly:true, 
  							format:'Y-m-d',
  							anchor:'90%',
  							listeners:{
  								'change':function(){
  									Ext.getCmp('age').setValue(new Date().getFullYear()-this.getValue().getFullYear());
  								}
  							}
  						},{
  							xtype:'textfield',
  							fieldLabel:'联系电话',
  							anchor:'90%'
  						},{
  							xtype:'textfield',
  							fieldLabel:'电子邮件',
  							anchor:'90%'
  						},{
  							xtype:'combo',
  							fieldLabel:'性别',
  							anchor:'90%',
  							displayField:'sex',
  							mode:'local',
  							triggerAction:'all',
  							readOnly:true, 
  							store:new Ext.data.SimpleStore({
  								fields:['sex'],
  								data:[['男'],['女']]
  							})
  						}]
  					},{
  						layout:'form',
  						columnWidth:0.5,
  						baseCls:'x-plain',
  						labelWidth:55,
  						items:[{
  							id:'image',
  							xtype:'textfield',
  							fieldLabel:'个人照片',
  							inputType:'image',
  							width:170,
  							height:160
  						}]
  					}]
  				},{
  					layout:'form',
  					baseCls:'x-plain',
  					style:'padding:8px;',
  					labelWidth:55,
  					items:[{
  						xtype:'textfield',
  						fieldLabel:'身份证号',
  						anchor:'90%'
  					},{
  						xtype:'textfield',
  						fieldLabel:'详细地址',
  						anchor:'90%'
  					},{
  						xtype:'combo',
  						fieldLabel:'职位',
  						anchor:'50%',
  						displayField:'value',
						mode:'local',
						triggerAction:'all',
						readOnly:true, 
						store:new Ext.data.SimpleStore({
							fields:['code','value'],
							data:[
								['1','教授'],
								['2','副教授'],
								['3','高级讲师'],
								['4','中级讲师'],
								['5','初级讲师'],
								['6','助教']
							]
						})
  					}]
  				}],
  				buttonAlign:'center',
  				buttons:[{
  					text:'确定'
  				},{
  					text:'取消'
  				}],
  				listeners:{
  					'show':function(){
  						Ext.getDom('image').src='User.gif';
  					}
  				}
  			});
  		window.show();
  		});
  	</script>

 

评论

1 楼 tongsh6 2013-02-26  

好啊1