1.column Layout 列布局 在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。 columnWidth表示使用百分比的形式指定列宽度。 width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。 Ext.onReady(function(){ var window = new Ext.Window({ layout: "column", title: "Hello World", id: "helloWorldWindow", bodyStyle: "padding:10px;", width: 550, height: 300, x: 100, y: 100, items: [ { columnWidth: .6, baseCls: "x-plain", frame: true, layout: "form", bodyStyle: "padding:5px;", items: [ {xtype: "textfield", fieldLabel: "UserName"}, {xtype: "textfield", fieldLabel: "Age"} ] }, { columnWidth: .3, baseCls: "x-plain", bodyStyle: "padding:5px;", items: [ {xtype: "textarea"} ] }, { columnWidth: .1, baseCls: "x-plain", bodyStyle: "padding:5px;", layout: "form", items: [ { xtype: "button", text: "Ok", handler: function() { alert("OK"); } }, { xtype: "button", text: "Cancel", handler: function() { alert("Cancel"); } } ] } ] }); window.render(Ext.getDom("tt")); window.show(); }); 2.fit Layout Fit布局,子元素将自动填满整个父容器(对元素设置宽度无效),如果容器组件中有多个子元素,则只 会显示第一个子元素。 Ext.onReady( function(){ var win = new Ext.Window({ title: "Hello World", renderTo: Ext.getDom("tt"), width: 400, height: 250, x: 150, y: 50, layout: "fit", items: [ {xtype:"panel", title:"O"}, {xtype:"panel", title:"K"} ] }); win.show(); } ); 3. border Layout 一、Border布局由类Ext.layout.BorderLayout定义,布局名称为border。该布局把容器分成东南西北中 五个区域,分别由east,south, west,north, cente来表示,在往容器中添加子元素的时候,我们只需 要指定这些子元素所在的位置,Border布局会自动把子元素放到布局指定的位置。 Ext.onReady( function() { new Ext.Viewport({ layout:"border", items:[ { region:"north", height:80, xtype: "label", //style: "border: 1px solid red;padding:1px;", frame: true, text: "cdred.net study club" }, { region:"south", height:20, xtype:'label', text:'Status show zone..' }, { region:"center", title:"中央面板" }, { region:"west", width:200, title:"系统栏目", collapsible: true }, { region:"east", width:150, collapsed: true, collapsible: true, title:"在线好友" } ] }); } );
4.accordion Layout Accordion布局由类Ext.layout.Accordion定义,表示可折叠的布局,点击每一个子元素的头部名称或右 边的按钮,则会展开该面板,并收缩其它已经展开的面板。 layoutConfig:true表示在执行展开折叠时启动动画效果,默认值为false。 ** 注意如果你是用 panel之类的 必须拥有 title:'' 属性 Ext.onReady(function(){ var panel = new Ext.Panel({ title:"人员信息", renderTo:Ext.getDom("tt"), frame:true, width:250, height:300, layout:"accordion", layoutConfig: { animate: true }, items:[ {xtype:"panel", title:"O", html:"这是子元素1中的内容"}, {xtype:"panel", title:"K", html:"这是子元素2中的内容"}, {xtype:"panel", title:"L", html:"这是子元素3中的内容"} ] }); }); 5 form Layout Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局, 这种布局主要用于在程序中创建表单字段或表单元素等使用。 hideLabels:tru表示隐藏标签,默认为false。 labelAlign:标签队齐方式left、right、center,默认为left。 在实际应用中,Ext.form.FormPanel这个类默认布局使用的是Form布局,因此我们直接使用FormPanel即 可。 Ext.onReady( function() { var panel = new Ext.Panel({ layout:"form", title: "HelloWorld", renderTo:Ext.getDom("tt"), width: 400, height:250, frame: true, hideLabel: true, collapsible: true, bodyStyle: "padding:20px;", defaultType:"textfield", items:[ {fieldLabel:"Hello"}, {fieldLabel:"World"} ] }); } );
七,fit 一个子元素将充满整个容器(如果多个子元素则只有一个元素充满整个容器) 例一: 例二: 如果容器组件中有多个子元素,则只会显示一个元素,如下面的代码: Js代码 Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"容器组件", layout:"fit", width:500, height:100, items:[{title:"子元素1",html:"这是子元素1中的内容"}, {title:"子元素2",html:"这是子元素2中的内容"} ] }); }); Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"容器组件", layout:"fit", width:500, height:100, items:[{title:"子元素1",html:"这是子元素1中的内容"}, {title:"子元素2",html:"这是子元素2中的内容"} ] }); }); 例三:如果不使用布局Fit,代码如下: Js代码 Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"容器组件", width:500, height:200, items:[{title:"子元素1",html:"这是子元素1中的内容"}, {title:"子元素2",html:"这是子元素2中的内容"} ] }); }); Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"容器组件", width:500, height:200, items:[{title:"子元素1",html:"这是子元素1中的内容"}, {title:"子元素2",html:"这是子元素2中的内容"} ] }); }); 八、form 是一种专门用于管理表单中输入字段的布局 Js代码 Ext.onReady(function() { var win = new Ext.Window({ title: "form Layout", height: 150, width: 230, plain: true, bodyStyle: 'padding:15px', items:{ xtype: "form", labelWidth: 30, defaultType: "textfield", frame:true, items:[ { fieldLabel:"姓名", name:"username", allowBlank:false //必填项(非空) }, { fieldLabel:"呢称", name:"nickname" }, { fieldLabel: "生日", xtype:'datefield', name: "birthday", width:127 } ] } }); win.show(); }); Ext.onReady(function() { var win = new Ext.Window({ title: "form Layout", height: 150, width: 230, plain: true, bodyStyle: 'padding:15px', items:{ xtype: "form", labelWidth: 30, defaultType: "textfield", frame:true, items:[ { fieldLabel:"姓名", name:"username", allowBlank:false //必填项(非空) }, { fieldLabel:"呢称", name:"nickname" }, { fieldLabel: "生日", xtype:'datefield', name: "birthday", width:127 } ] } }); win.show(); }); 九、table 按照普通表格的方法布局子元素,用layoutConfig:{columns:3},//将父容器分成3列 例一: Js代码 Ext.onReady(function(){ var panel=new Ext.Panel( { renderTo:'hello', title:'容器组件', layout:'table', width:500, height:200, layoutConfig:{columns:3},//将父容器分成3列 items:[ {title:'元素1',html:'ssssssssss',rowspan:2,height:100}, {title:'元素2',html:'dfffsddsdfsdf',colspan:2}, {title:'元素3',html:'sdfsdfsdf'}, {title:'元素4',html:''} ] }); }); Ext.onReady(function(){ var panel=new Ext.Panel( { renderTo:'hello', title:'容器组件', layout:'table', width:500, height:200, layoutConfig:{columns:3},//将父容器分成3列 items:[ {title:'元素1',html:'ssssssssss',rowspan:2,height:100}, {title:'元素2',html:'dfffsddsdfsdf',colspan:2}, {title:'元素3',html:'sdfsdfsdf'}, {title:'元素4',html:''} ] }); }); Js代码 Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"容器组件", layout:"fit", width:500, height:100, items:[{title:"子元素",html:"这是子元素中的内容"}] }); });