ExtJs的window布局(1)

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

抢街饭

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

阅读量1.3k

点赞数

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

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

版权

ExtJs 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

接下来做个个人资料的EXT的window布局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(){
		/*几个前面没有介绍的window自己的配置参数   
		1.closeAction:枚举值为：close(默认值)，当点击关闭后，关闭window窗口  hide,关闭后，只是hidden窗口  
		2.closable:true在右上角显示小叉叉的关闭按钮，默认为true  
		3.constrain：true则强制此window控制在viewport，默认为false  
		4.modal:true为模式窗口，后面的内容都不能操作，默认为false  
		5.plain：//true则主体背景透明，false则主体有小差别的背景色，默认为false   
		6.需要显示下show()方法,默认的窗口是可拖动的，可关闭的，可拖动大小的   
	    */
		var win = new Ext.Window({
			title: "个人资料",
			width:500,
			height:100,
			plain:true,
			items:[
				{}
			],
			buttons:[
				{text:"OK"},
				{text:"Cancel"}
			]
		});
		win.show();
	});
</script>    
<body>
</body>
</html>

运行一下看看结果：

我靠了太tmd难看那是因为：

items:[{}]，如果没有指定defaultType，items中默认就是Panel类型很难看

Panel的背景是白色，想要背景色和外面的Container统一，它提供了另外一种方式baseCls:"x-plain"。

<!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(){
		/*几个前面没有介绍的window自己的配置参数   
		1.closeAction:枚举值为：close(默认值)，当点击关闭后，关闭window窗口  hide,关闭后，只是hidden窗口  
		2.closable:true在右上角显示小叉叉的关闭按钮，默认为true  
		3.constrain：true则强制此window控制在viewport，默认为false  
		4.modal:true为模式窗口，后面的内容都不能操作，默认为false  
		5.plain：//true则主体背景透明，false则主体有小差别的背景色，默认为false   
		6.需要显示下show()方法,默认的窗口是可拖动的，可关闭的，可拖动大小的   
	    */
		var win = new Ext.Window({
			title: "个人资料",
			width:500,
			height:100,
			plain:true,
			items:[
				{baseCls:"x-plain"}
			],
			buttons:[
				{text:"OK"},
				{text:"Cancel"}
			]
		});
		win.show();
	});
</script>    
<body>
</body>
</html>

看看结果怎么样：

白条没有了O(∩_∩)O~ 稍微好看点！！！

接下来做点什么呢在Window中加上两列吧

<!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:100,
			plain:true,
			items:[{
				baseCls:"x-plain",
				layout:"column",
				items:[
					{columnWidth:.5},
					{columnWidth:.5}
				]
				
		   }],
			buttons:[
				{text:"OK"},
				{text:"Cancel"}
			]
		});
		win.show();
	});
</script>    
<body>
</body>
</html>

看看自己想法实现没有啊：

貌似还像那么回事！！！O(∩_∩)O~

注：布局样式为“column”，按列来进行布局，再在这个Panel的构造参数items中放入两个对象，设置columnWidth属性为“.5”（50%，0.5的缩写，可以省略调前面的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
				}
			  ]
				
		   }],

			buttons:[
				{text:"OK"},
				{text:"Cancel"}
			]
		});
		win.show();
	});
</script>    
<body>
</body>
</html>

这次再看看效果：

我日怎么有一行置顶啊头疼

API中可以看到，通过构造参数inputType，可以设置TextField的类型，就像HTML中的input框一样，可以是：文本框，密码框，单选框，复选框，上传文件的类型还有图片类型等，inputType默认是文本框。

如果不加baseCls:"x-plain", 和bodyStyle:"padding-top: 15px; padding-left:10px;",会出现白色背景并且置顶

抢街饭

关注

0
点赞
踩
0

收藏

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

接下来做个个人资料的EXT的window布局O(∩_∩)OExtJs整理 Ext.onReady(function(){ /*几个前面没有介绍的window自己的配置参数 1.closeAction:枚举值为：close(默认值)，当点击关闭后，关闭window窗口 hide,关闭后，只是hidden窗口 2.clos
复制链接

扫一扫

专栏目录