首页 > 代码库 > ExtJs--04--window窗口属性说明并两种方式添加子组件
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,//关闭按钮显示 // 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窗口属性说明并两种方式添加子组件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。