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窗口属性说明并两种方式添加子组件