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

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,//关闭button显示
//				modal:true,//模态
				left:100,//绝对定位  左边距
				top:50,//绝对定位  右边距
				collapsible:true,//显示伸缩button
				maximizable: true,//能否够最大化，也能够理解为是否显示最大化button。

				minimizable: true,//能否够最小化。也能够理解为是否显示最小化button。

//				html:"<div><span style='background:gray;'>div内容区域</span></div>", //内容
				bodyStyle:"background:lightgreen;",//内容区背景色
//				padding:10,  //边框padding内边距
//				closeAction:"hide",//点击关闭button之后  隐藏还是 .....  默觉得销毁  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();
})