ExtJS学习笔记七：复杂页面布局实现

最新推荐文章于 2024-07-22 08:30:00 发布

千纸蝴蝶

最新推荐文章于 2024-07-22 08:30:00 发布

阅读量3.9k

点赞数

分类专栏： ExtJS 文章标签： extjs layout function image 照片电话

本文链接：https://blog.csdn.net/zhaoshl_368/article/details/6680263

版权

ExtJS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<script type='text/javascript'>
	Ext.onReady(function(){
		new Ext.Window({
			title:"添加人员",
			width:500,
			height:345,
			plain:true,
			layout:"form",
			labelWidth:55,
			defaultType:"textfield",
			bodyStyle:"padding:5px",
			//style:"padding:5px",
			items:[{
				xtype:"panel",
				//设置背景色和容器颜色一致
				baseCls:"x-plain",
				layout:"column",
				items:[{
					columnWidth:0.5,
					baseCls:"x-plain",
					layout:"form",
					defaultType:"textfield",
					defaults:{width:160},
					labelWidth:55,
					items:[{
						fieldLabel:"姓名"
					},{
						fieldLabel:"年龄"
					},{
						fieldLabel:"出生日期"
					},{
						fieldLabel:"联系电话"
					},{
						fieldLabel:"手机号码"
					},{
						fieldLabel:"电子邮件"
					},{
						fieldLabel:"性别"
					}]
				},{
					columnWidth:0.5,
					baseCls:"x-plain",
					layout:"form",
					labelWidth:55,
					items:{
						xtype:"textfield",
						inputType:"image",
						fieldLabel:"个人照片",
						width:170,
						height:170
					}
				}]
			},{
				fieldLabel:"身份证号",width:400
			},{
				fieldLabel:"具体地址",width:400
			},{
				fieldLabel:"职位",width:400
			}],
			showLock:false,//用于只加载一次
			listeners:{
				"show":function(_window){
					//得到Ext中元素对象
					if(!_window["showLock"])
					_window.findByType("textfield")[7].getEl().dom.src="zhao.jpg";
				}
			},
			buttons:[{
				text:"确定"
			},{
				text:"取消"
			}]
		}).show();
	})
</script>