ext2.0中layout布局（6）

来源：互联网发布：linux 关闭所有防火墙编辑：程序博客网时间：2024/06/03 21:06

1.ExtJS一共包含十种布局，常用的布局有border、column、fit、form、card、tabel等布局

column布局：

Ext.onReady(function(){new Ext.Panel({renderTo:"hello",width:400,height:200,layout:"column",items:[{columnWidth:.5,title:"面板1"},{columnWidth:.5,title:"面板2"}]});});

Ext.onReady(function(){new Ext.Panel({renderTo:"hello",title:"容器组件",layout:"column",width:500,height:100,items:[{title:"列1",width:100},{title:"列2",width:200},{title:"列3",width:100},{title:"列4"}   ]});});

Ext.onReady(function(){new Ext.Panel({renderTo:"hello",title:"容器组件",layout:"column",width:500,height:100,items:[{title:"列1",columnWidth:.2},{title:"列2",columnWidth:.3},{title:"列3",columnWidth:.3},{title:"列4",columnWidth:.2}  ]});});

Ext.onReady(function(){new Ext.Panel({renderTo:"hello",title:"容器组件",layout:"column",width:500,height:100,items:[{title:"列1",width:200},{title:"列2",columnWidth:.3},{title:"列3",columnWidth:.3},{title:"列4",columnWidth:.4}] });});

border布局：

Ext.onReady(function(){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:"右边面板"}]});});

Fit 布局：

Ext.onReady(function(){new Ext.Panel({renderTo:"hello",title:"容器组件",layout:"fit",width:500,height:100,items:[{title:"子元素",html:"这是子元素中的内容"}] });});

比较上诉和下面的代码的效果：

Ext.onReady(function(){new Ext.Panel({renderTo:"hello",title:"容器组件",width:500,height:200,items:[{title:"子元素",html:"这是子元素中的内容"},{title:"子元素22",html:"2222222222222222"}] });});

form布局：

Form 布局由类Ext.layout.FormLayout 定义，名称为form，是一种专门用于管理表单中输入字段的布局，

Ext.onReady(function(){new Ext.Panel({renderTo:"hello",title:"容器组件",width:300,layout:"form",hideLabels:false,labelAlign:"right",height:120,defaultType: 'textfield',items:[{fieldLabel:"请输入姓名",name:"name"},{fieldLabel:"请输入地址",name:"address"},{fieldLabel:"请输入电话",name:"tel"}] });});

在父容器中还通过hideLabels、labelAlign 等配置属性来定义了是否隐藏标签、标签对齐方式等

Accordion 布局

Ext.onReady(function(){new Ext.Panel({renderTo:"hello",title:"容器组件",width:500,height:200,layout:"accordion",layoutConfig: {animate: true},items:[{title:"子元素1",html:"这是子元素1中的内容"},{title:"子元素2",html:"这是子元素2中的内容"},{title:"子元素3",html:"这是子元素3中的内容"}]});});

Table 布局

Ext.onReady(function(){var panel=new Ext.Panel({renderTo:"hello",title:"容器组件",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中的内容"}] });});