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

页面导航:首页 > 网络编程 > JavaScript > ExtJs--04--window窗口属性说明并两种方式添加子组件

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

来源: 作者: 时间:2016-02-19 09:19 【

Ext onReady(function(){ **extjs 容器组件的layout属性可以设置它的显示风格,以下视情况选用:- Auto - **默认**- hbox 水平方向排列- vbox 垂直方向排列1)absolute:在容器内部,根据指定的
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,//是否可以最小化,也可以理解为是否显示最小化按钮。
//				:"
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(); })

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<