ExtJS中layout布局详解

layout中有absolute,anchor,border,accordion,card,form,table,column,fit这几种，现一一举例：
1.absolute根据字面意思就知道，是根据具体坐标进行定位的，固不写相应的代码了，其他的如下
2.anchor:其值可以使百分比和数值，数值一般为负数，其代表的意思是如果宽度和长度中有一个设定值了，则anchor代表的是未设置的那个，如果两者都没有设定具体值，则如果需要使用anchor则需要anchro:'ww,hh'

Js代码

Ext.onReady(function() {
Ext.create('Ext.Window',{
title:'Anchor layout',
width:400,
height:400,
layout:'anchor',
plain: true,
items:[
Ext.create('Ext.panel.Panel',{
title:'panel1',
height:100,
anchor:'-50',
html:'高度等于100，宽度= 容器宽度-50'
}),
Ext.create('Ext.panel.Panel',{
title:'panel2',
height:100,
anchor:'50%',
html:'高度等于100，宽度=容器的宽度*50%'
}),
Ext.create('Ext.panel.Panel',{
title:'panel3',
anchor:'-10,-200',
html:'高度等于容器高度-10,宽度等于容器宽度-200'
})
]
}).show();
});

3.border:将容器分为五个区域:east,south,west,north,center

Js代码

Ext.onReady(function(){
var tab = Ext.create('Ext.tab.Panel',{
region:'center',//border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
margins:'3,3,3,0',
activeTab:0,
defaults:{
autoScroll:true
},
items:[{
title:'tab1',
html:'第一个tab内容'
},{
title:'tab2',
html:'第二个tab内容'
},{
title:'tab3',
html:'第三个tab内容'
}]
})
var nav = Ext.create('Ext.panel.Panel',{
title:'navigation',
region:'west',
split:true,
width:200,
collapsible:true,//允许伸缩
margins:'3,0,3,3',
cmargins:'3,3,3,'
});
Ext.create('Ext.Window',{
title:'Layout Window',
width:600,
height:350,
closable:true,
border:false,
plain:true,
layout:'border',
closeAction:'hide',
items:[nav,tab]
}).show();
)};

4.accordion:这个风格是手风琴式的，效果是如果有多个item，则点击其中一个，则展开，其他的则收缩。

Js代码

Ext.OnReady(function(){
Ext.create('Ext.panel.Panel',{
title:'容器组件',
layout:'accordion',
width:600,
height:200,
layoutConfig:{animate:false},
items:[{
title:'元素1',html:''
},{
title:'元素2',html:''
},{
title:'元素3',html:''
},{
title:'元素4',html:''
}]
});
});

5.card:像安装向导一样，一张一张显示

Js代码

Ext.onReady(function(){
var navigate = function(panel,direction){
var layout = panel.getLayout();
layout[direction]();
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
Ext.getCmp('move-next').setDisabled(!layout.getNext());
};
Ext.create('Ext.panel.Panel',{
title:'Example Wizard',
height:500,
width:400,
layout: 'card',
activeItem:0,
bodyStyle:'padding:15px',
animCollapse:true,
renderTo:Ext.getBody(),
defaults:{
// applied to each contained panel
border: false
},
bbar:[{
id:'move-prev',
text:'back',
handler:function(btn){
navigate(btn.up("panel"),"prev");
},
disabled:true
},'->',{
id:'move-next',
text:"next",
handler:function(btn){
navigate(btn.up("panel"),"next");
}
}],
items:[{
id:'card-0',
html:'<h1>Welcome to the Wizard!</h1>'
},{
id:'card-1',
html:'<p>step 2 of 3 </p>'
},{
id:'card-2',
html:'<h1>Congratulations!</h1><p>Step 3 of 3-complete</p>'
}]
});
});

6.form:是一种专门用于管理表单中输入字段的布局

Js代码

Ext.onReady(function() {
var win = Ext.create('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();
});

7.table:按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列

Js代码

Ext.onReady(function(){
Ext.create('Ext.panel.Panel',
{
renderTo:Ext.getBody(),
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:''}
]
}
);
});

8.column:把整个容器看成一列,然后向容器放入子元素时

Js代码

Ext.onReady(function() {
var win = Ext.create('Ext.Window',{
title: "Column Layout",
height: 300,
width: 400,
plain: true,
layout: 'column',
items: [{
title:"width=50%",
columnWidth:0.5,
html:"width=(容器宽度-容器内其它组件固定宽度)*50%",
height:200
},
{
title:"width=250px",
width: 200,
height:100,
html:"固定宽度为250px"
}
]
});
win.show();
});

9.fit:填充整个容器（如果多个子元素则只有一个元素充满整个容器）

Js代码

Ext.OnReady(function(){
Ext.create(Ext.create(Ext.panel.Panel',
{
renderTo:'paneldiv',
title:'容器组件',
layout:'fit',
width:500,
height:100,
items:[
{title:'子元素1'},
{title:'子元素2'},
{title:'子元素3'},
{title:'子元素4'},
{title:'子元素5'}
]
}
);
});

转载地址：http://zhouyihui2010.iteye.com/blog/1235404点击打开链接

ExtJS中layout布局详解相关推荐

DevExpress控件GridControl中的布局详解【转】
DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28| 分类: devexpress | 标签:devexpress |举报|字号订阅 h ...
Android中layout过程详解 (结合Android 4.0.4 最新源码)
上一篇文章Android中mesure过程详解 (结合Android 4.0.4 最新源码)介绍了View树的measure过程,相对与measure过程,本文介绍的layout过程要简单多了,正如l ...
Android中layout过程详解
相比较onMeasure ,layout过程要简单多了,正如layout的中文意思"布局"中表达的一样,layout的过程就是确定View在屏幕上显示的具体位置,在代码中就是设置其 ...
安卓基础知识-layout布局详解。
安卓基础知识 1. 目录结构: src存放java源代码. gen存放系统自动生成的配置文件 res存放应用用到的所有资源文件,如图片,布局等等 drawable存放不同分辨率的图片 layout存放 ...
Android 布局学习之——Layout(布局)详解一
layout(布局)定义了用户界面的可视化结构(visual structure),如Activity的UI,应用窗口的UI. 有两种方式声明layout: 1.在xml文件中声明UI组件. 2.在运 ...
【原创】DevExpress控件GridControl中的布局详解
在进行DevExpress控件GridControl的使用时,因控件的灵活性,所以用户会经常进行拖动控件的列,以达到自己满意的样式, 但下次再打开时系统就会重新还原到原有的布局风格,为了能够保持用户之 ...
在html5中flex布局详解,Flex布局详解（一）
在讲解Flex布局之前,我们首先可以回顾一下我们平时在做行向布局或者纵向布局时候我们页面的布局主要用到哪些布局方法或者思路. 1.normal flow (正常流,也叫文档流)--内联元素从左往右排列 ...
html div flex,CSS中flex布局详解
1.浏览器flex兼容申明 dispaly:flex; display:-webkit-flex; display:-ms-flex; display:-moz-flex; display:-o-fl ...
qt布局嵌套_QDockWidget嵌套布局详解-实现Visual Studio布局
概述许多工程软件,如Qt Creator,VS,matlab等,都是使用dock布局窗口,这样用户可以自定义界面,自由组合窗口. Qt的嵌套布局由QDockWidget完成,用Qt Creator拖 ...

ExtJS中layout布局详解

ExtJS中layout布局详解相关推荐

最新文章

热门文章