ExtJs的window布局(3)

最新推荐文章于 2021-08-03 21:06:15 发布

抢街饭

最新推荐文章于 2021-08-03 21:06:15 发布

阅读量3.2k

点赞数

分类专栏： ExtJs 文章标签： extjs layout stylesheet xhtml function image

本文链接：https://blog.csdn.net/lzwjavaphp/article/details/6956667

版权

ExtJs 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJs整理</title>
<link rel="stylesheet" type="text/css" href="ExtJs/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJs/adapter/ext-base.js"></script>
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
<script type="text/javascript" src="ExtJs/src/locale/ext-lang-zh_CN.js"></script>
</head>
<script type="text/javascript"> 
	Ext.onReady(function(){
		var win = new Ext.Window({
			title: "个人资料",
			width:500,
			height:320, 
			plain:true,
			layout:"form",    
            defaultType:"textfield",    
            labelWidth:45,    
            bodyStyle:"padding-top: 10px; padding-left:10px;",    
            //defaults:{anchor:"100%"},    
			items:[{
			    xtype:"panel",  
				baseCls:"x-plain",
				layout:"column",
				items:[{
					columnWidth:.5,
					layout:"form",
					defaults:{xtype:"textfield", width:170},
					labelWidth:45,
					baseCls:"x-plain",    
					//bodyStyle:"padding-top: 15px; padding-left:10px;",    
					items:[
						{fieldLabel:"姓名"},
						{fieldLabel:"年龄"},
						{fieldLabel:"邮箱"},
						{fieldLabel:"性别"},
						{fieldLabel:"电话"},
						{fieldLabel:"地址"}
					]
				},
				{
					columnWidth:.5,
					layout:"form",    
					style:"padding:10px 10px 0 10px",  
					//顺序是 上 右 下 左，也就是顺时针的方向
					//bodyStyle:"padding-top: 15px; padding-left:10px;",   
					labelWidth:45,    
					baseCls:"x-plain",  
					items:[    
						{    
							xtype:"textfield",     
							inputType:"image", 
							width:160,    
							height:140,    
							fieldLabel:"头像"   
						}    
					]    
   				 }
			  ]				
		   },{
				fieldLabel:"公司",
				width:"400"
		   },{
				fieldLabel:"资料",
				width:"400"
		   },{
				fieldLabel:"说明",
				width:"400"
		   }],
		   // showLock:false,    
			buttons:[
				{text:"OK"},
				{text:"Cancel"}
		   ]
		});
		win.show();
	});
</script>    
<body>
</body>
</html>

看看自己的想法实现了没有：

good 至于你们满不满意反正我是满意了！！！

如果你们不满意

给头像加一张美女图片吧 O(∩_∩)O~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJs整理</title>
<link rel="stylesheet" type="text/css" href="ExtJs/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJs/adapter/ext-base.js"></script>
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
<script type="text/javascript" src="ExtJs/src/locale/ext-lang-zh_CN.js"></script>
</head>
<script type="text/javascript"> 
	Ext.onReady(function(){
		var win = new Ext.Window({
			title: "个人资料",
			width:500,
			height:320, 
			plain:true,
			layout:"form",    
            defaultType:"textfield",    
            labelWidth:45,    
            bodyStyle:"padding-top: 10px; padding-left:10px;",    
            //defaults:{anchor:"100%"},    
			items:[{
			    xtype:"panel",  
				baseCls:"x-plain",
				layout:"column",
				items:[{
					columnWidth:.5,
					layout:"form",
					defaults:{xtype:"textfield", width:170},
					labelWidth:45,
					baseCls:"x-plain",    
					//bodyStyle:"padding-top: 15px; padding-left:10px;",    
					items:[
						{fieldLabel:"姓名"},
						{fieldLabel:"年龄"},
						{fieldLabel:"邮箱"},
						{fieldLabel:"性别"},
						{fieldLabel:"电话"},
						{fieldLabel:"地址"}
					]
				},
				{
					columnWidth:.5,
					layout:"form",    
					style:"padding:10px 10px 0 10px",  
					//顺序是 上 右 下 左，也就是顺时针的方向
					//bodyStyle:"padding-top: 15px; padding-left:10px;",   
					labelWidth:45,    
					baseCls:"x-plain",  
					items:[    
						{    
							xtype:"textfield",     
							inputType:"image", 
							width:160,    
							height:140,    
							fieldLabel:"头像"   
						}    
					]    
   				 }
			  ]				
		   },{
				fieldLabel:"公司",
				width:"400"
		   },{
				fieldLabel:"资料",
				width:"400"
		   },{
				fieldLabel:"说明",
				width:"400"
		   }],
		    showLock:false,  
			listeners:{
				"show":function(win){
					if(!win['showLock']){
						win.findByType("textfield")[6].getEl().dom.src = 
						"ExtJs/2011-08-12_092322.jpg";
						win["showLock"] = true;
					}
				}
			},
			buttons:[
				{text:"OK"},
				{text:"Cancel"}
		   ]
		});
		win.show();
	});
</script>    
<body>
</body>
</html>

看看最后的效果：

图片加载注册到show()方法上，每次Window调用show()方法的时候都会加载图片，效果也不理想，最好是Image随着Window创建只加载一次，当Window调用Hide()方法隐藏后再显示出来就不用再次装载了。

抢街饭

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
ExtJs的window布局(3)

ExtJs整理 Ext.onReady(function(){ var win = new Ext.Window({ title: "个人资料", width:500, height:320, plain:true, layout:"form", defaultType:"textfie
复制链接

扫一扫