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,center5) 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",//点击关闭按钮之后  隐藏还是 .....  默认为销毁  destroyrendTo: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();})