ExtJs的window布局(2)

最新推荐文章于 2021-07-06 17:00:31 发布

抢街饭

最新推荐文章于 2021-07-06 17:00:31 发布

阅读量3.7k

点赞数

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

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

版权

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,
			items:[{
				baseCls:"x-plain",
				layout:"column",
				items:[{
					columnWidth:.5,
					layout:"form",
					defaults:{xtype:"textfield", width:170}, 
                    baseCls:"x-plain",    
					bodyStyle:"padding-top: 15px; padding-left:10px;",
					labelWidth:45,
					items:[
						{fieldLabel:"姓名"},
						{fieldLabel:"年龄"},
						{fieldLabel:"邮箱"},
						{fieldLabel:"性别"},
						{fieldLabel:"电话"},
						{fieldLabel:"地址"}
					]
				},
				{
					columnWidth:.5,
					layout:"form",    
					//style:"padding:10px 10px 0 10px",  
					defaults:{xtype:"textfield", width:170}, 
                    //顺序是 上 右 下 左，也就是顺时针的方向
					baseCls:"x-plain",
					bodyStyle:"padding-top: 15px; padding-left:10px;",    
					labelWidth:45,    				
					items:[
						{fieldLabel:""}
					]
				}
			  ]				
		   }],
			buttons:[
				{text:"OK"},
				{text:"Cancel"}
			]
		});
		win.show();
	});
</script>    
<body>
</body>
</html>

看看结果：

OK：搞定

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,
			items:[{
				baseCls:"x-plain",
				layout:"column",
				items:[{
					columnWidth:.5,
					layout:"form",
					defaults:{xtype:"textfield", width:170}, 
                    baseCls:"x-plain",    
					bodyStyle:"padding-top: 15px; padding-left:10px;",
					labelWidth:45,
					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:150,    
							height:140,    
							fieldLabel:"头像"   
						}    
					]
				}
			  ]				
		   }],
			buttons:[
				{text:"OK"},
				{text:"Cancel"}
			]
		});
		win.show();
	});
</script>    
<body>
</body>
</html>

看看我们的头像：

下半区再加点（公司、资料、说明）

抢街饭

关注

0
点赞
踩
1

收藏

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

ExtJs整理 Ext.onReady(function(){ var win = new Ext.Window({ title: "个人资料", width:500, height:320, plain:true, items:[{ baseCls:"x-plain", layout:"column"
复制链接

扫一扫