某某茶叶有限公司欢迎您!
金沙棋牌在线 > 服务器&运维 > 学习ExtJS border布局_extjs_脚本之家

学习ExtJS border布局_extjs_脚本之家

时间:2019-12-23 05:08

一、Table布局由类Ext.layout.TableLayout定义,类以于html中的table,可以对行或列进行合并。 layoutConfig使用columns指定父容器分成3列, rowspan合并行数目。 colspan合并列数目。 二、应用举例 复制代码 代码如下: Ext.onReady{ var _panel = new Ext.Panel({ title:"人员信息", renderTo:Ext.getBody(), width:500, height:200, layout:"table", layoutConfig: { columns: 3 }, items:[{title:"子元素1",html:"这是子元素1中的内容",rowspan:2,height:100}, {title:"子元素2",html:"这是子元素2中的内容",colspan:2}, {title:"子元素3",html:"这是子元素3中的内容"}, {title:"子元素4",html:"这是子元素4中的内容"} ] } );

一、Accordion布局由类Ext.layout.Accordion定义,表示可折叠的布局,点击每一个子元素的头部名称或右边的按钮,则会展开该面板,并收缩其它已经展开的面板。 layoutConfig:true表示在执行展开折叠时启动动画效果,默认值为false。 二、应用举例 复制代码 代码如下: Ext.onReady{ var _panel = new Ext.Panel({ title:"人员信息", renderTo:Ext.getBody(), frame:true, width:500, height:300, layout:"accordion", layoutConfig: { animate: true }, items:[{title:"子元素1",html:"这是子元素1中的内容"}, {title:"子元素2",html:"这是子元素2中的内容"}, {title:"子元素3",html:"这是子元素3中的内容"} ] } );

一、Border布局由类Ext.layout.BorderLayout定义,布局名称为border。该布局把容器分成东南西北中五个区域,分别由east,south, west,north, cente来表示,在往容器中添加子元素的时候,我们只需要指定这些子元素所在的位置,Border布局会自动把子元素放到布局指定的位置。 二、应用举例 复制代码 代码如下: Ext.onReady{ new Ext.Viewport({ layout:"border", items:[{region:"north", height:50, title:"顶部面板"}, {region:"south", height:50, title:"底部面板"}, {region:"center", title:"中央面板"}, {region:"west", width:100, title:"左边面板"}, {region:"east", width:100, title:"右边面板"} ] }); });

金沙棋牌在线,一、属性 baseCls:"x-plain" Panel背景色颜色。 layout:"column" Panel进行列布局。 在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。 columnWidth表示使用百分比的形式指定列宽度。 width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。 二、应用举例 复制代码 代码如下: Ext.onReady{ new Ext.Window({ title:"新增", width:500, height:400, plain:true, layout:"form", labelWidth:55, items:[{ layout:"column", baseCls:"x-plain", style:"padding:5px", items:[{ columnWidth:.5, layout:"form", labelWidth:50, baseCls:"x-plain", items:[{ xtype:"textfield", fieldLabel:"姓名" },{ xtype:"textfield", fieldLabel:"姓名" },{ xtype:"textfield", fieldLabel:"姓名" },{ xtype:"textfield", fieldLabel:"姓名" }] },{ columnWidth:.5, layout:"form", items:[{ id:"name", xtype:"textfield", fieldLabel:"照片", inputType:"image", width:250, height:50 }] }] },{ xtype:"textfield", fieldLabel:" 证号" }], showlock:false, listeners:{ "show":function{ if f{ Ext.getCmp.dom.src = "default_pic.gif" ; _window.findByType[4].getEl().dom.src = "default_pic.gif" ; // alert(_window.findByType[4].fieldLabel); _window["showLock"]=true; } } }, buttons:[{text:"确定"},{text:"取消"}] }).show ; 复制代码 代码如下: Ext.onReady{ var _panel = new Ext.Panel({ title:"人员信息", renderTo:Ext.getBody(), frame:true, width:500, height:300, layout:"column", items:[{title:"列1",width:200}, {title:"列2",columnWidth:.3}, {title:"列3",columnWidth:.3}, {title:"列4",columnWidth:.4} ] }) }) ;