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:"自己定义标题信息",//标题
"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", //别名
"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();
})