ExtJs--04--window窗口属性说明并两种方式添加子组件

标签：layout   布局   extjs4   function   

Ext.onReady(function(){
/**
extjs 容器组件的layout属性可以设置它的显示风格，以下视情况选用：
- Auto - **默认**
- hbox  //水平方向排列
- vbox	//垂直方向排列

1)absolute:在容器内部，根据指定的坐标定位显示。
2）accordion:手风琴效果。
3）anchor: 注意以下几点：
           1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽
           2.anchor值通常只能为负值（指非百分比值），正值没有意义。
           3.anchor必须为字符串值
4) border :将容器分为五个区域：east,shouth，west,north,center
5) card:像安装向导一样，一张一张显示
6) colunm:把整个容器看成一列，然后向容器放入子元素
7）fit : 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）
8）form:是一种专门用于管理表单中输入字段的布局
9）table:按照普通表格的方法布局子元素，用layoutConfig:{colunms:5},//将父容器分为5列
 */
	var win = new Ext.window.Window({
				id:"id001",//自定义编号
				title:"自定义标题信息",//标题
				width:"40%",//宽度  可以使用百分比 自适应浏览器大小
				height:400,//高度
				resizable:false,//改变大小
				constrainHeader:true, //容器头部出界限制
//				draggable:false,    //拖拽
				closable:true,//关闭按钮显示
//				modal:true,//模态
				left:100,//绝对定位  左边距
				top:50,//绝对定位  右边距
				collapsible:true,//显示伸缩按钮
				maximizable: true,//是否可以最大化，也可以理解为是否显示最大化按钮。
				minimizable: true,//是否可以最小化，也可以理解为是否显示最小化按钮。
//				html:"<div><span style='background:gray;'>div内容区域</span></div>", //内容
				bodyStyle:"background:lightgreen;",//内容区背景色
//				padding:10,  //边框padding内边距
//				closeAction:"hide",//点击关闭按钮之后  隐藏还是 .....  默认为销毁  destroy
				rendTo:Ext.getBody(), //渲染到哪里
				layout:"vbox", //这个属性要添加，没有就不能正常添加子组件了
				items:[{		//在win中添加子组件
					xtype:"panel",  //别名
					width:"50%",
					height:100,
					bodyStyle:"background:lightgray;",
					html:"panel内容"
				},{
					xtype:"button",
					text:"LOGIN"
				},
				new Ext.button.Button({
					text:"REGISTER",
					handler:function(){  //触发句柄
						Ext.Msg.alert("弹出框标题","弹出框提示内容！");
					}
				})
				]
	});
	win.show();
})

ExtJs--04--window窗口属性说明并两种方式添加子组件

标签：layout   布局   extjs4   function   

原文地址：http://blog.csdn.net/responsecool/article/details/41013031