- 浏览: 35312 次
- 性别:
- 来自: 广州
-
文章分类
最新评论
5.1、ExtJS的布局管理器及其继承关系
从图中可以看出：Ext.layout.ContainerLayout是ExtJS所有布局类的根，它也是容器组件的缺省布局类：在容器中一个接一个地安排组件的显示，通常也称它为流式布局。一个使用Ext.layout.ContainerLayout布局的简单例子：
var childPnl1 = {
frame : true,
height : 50,
html : 'My First Child Panel',
title : 'First children are fun'
}
var childPnl2 = {
xtype : 'panel',
width : 150,
html : 'Second child',
title : 'Second children have all the fun!'
}
var myWin = new Ext.Window({
height : 300,
width : 300,
title : 'A window with a container layout',
autoScroll : true,
items : [
childPnl1,
childPnl2
],
tbar : [
{
text : 'Add child',
handler : function() {
var numItems = myWin.items.getCount() + 1;
myWin.add({
title : 'Child number ' + numItems,
height : 60,
frame : true,
collapsible : true,
collapsed : true,
html : 'Yay, another child!'
});
myWin.doLayout();
}
}
]
});
myWin.show();
运行结果：
<!--[endif]-->
在对ExtJS的容器进行布局时，使用Ext.Container的”layout”属性指定布局管理，使用Ext.Container的”layoutConfig”属性来对布局管理器的特定属性进行配置。各个布局管理器可以被配置的属性在ExtJS的API的各个布局管理器的Config Options中。
5.2、Ext.layout.AnchorLayout布局
Ext.layout.AnchorLayout与流式布局类似，只是在使用Ext.layout.AnchorLayout布局时可以在容器的items属性所指定的各个组件中使用：
anchor: “width, height”
来指定各个组件相对于容器的宽度和高度：%及整数类型的值均可以，其中”%”就是子组件相对于容器的百分比，而”整数值”就是子组件的大小等于容器的大小加上这个整数值。同时，对于使用Ext.layout.AnchorLayout进行布局管理的容器来说，可以在容器的配置属性中使用：
anchorSize: {width:宽度, height:高度},
来指定容器的布局宽度和布局高度，注意，这里的” 布局宽度和布局高度”与容器实际的宽度和高度无关。一个使用Ext.layout.AnchorLayout进行布局的例子：
var myWin = new Ext.Window({
height : 300,
width : 300,
layout : 'anchor',
autoScroll : true,
border : false,
anchorSize : {width:400, height:300},
items : [
{
title : 'Panel1',
anchor : '100%, 25%',
frame : true
},
{
title : 'Panel2',
anchor : ‘100%, 50%',
frame : true
},
{
title : 'Panel3',
anchor : '50%, 25%',
frame : true
}
]
});
myWin.show();
运行结果：
<!--[endif]-->
5.4、Ext.layout.FormLayout布局
FormLayout是AnchorLayout的子类，因此，AnchorLayout中相关配置属性，例如anchor、anchorSize同样适用于FormLayout。
使用FormLayout进行布局管理的容器可以在容器配置中使用如下这些FormLayout相关配置属性来对容器进行配置：
- hideLabels
- labelAlign
- labelPad
- labelSeparator
- labelWidth
这些配置属性的含义不言而喻。同时，对于采用FormLayout进行布局管理的容器，该容器中的组件则可以使用如下的FormLayout相关的属性进行配置：
- anchor
- clearCls
- fieldLabel
- hideLabel
- itemCls
- labelSeparator
- labelStyle
这些配置属性的含义不言而喻的。一个采用FormLayout布局的例子：
var myWin = new Ext.Window({
height : 220,
width : 230,
bodyStyle : 'padding: 5px',
layout : 'form',
labelWidth : 50,
defaultType : 'field',
items : [
{
fieldLabel : 'Name',
anchor : '-4'
},
{
fieldLabel : 'Age',
width : 25
},
{
xtype : 'combo',
fieldLabel : 'Location',
anchor : '-4',
store : [ 'Here', 'There', 'Anywhere' ]
},
{
xtype : 'textarea',
fieldLabel : 'Bio',
anchor : '-4, -135'
},
{
xtype : 'panel',
fieldLabel : ' ',
labelSeparator : '',
frame : true,
title : 'Instructions',
html : 'Please fill in the form',
anchor : '-4',
}
]
});
myWin.show();
运行结果：
5.5、Ext.layout.AbsoluteLayout布局
采用绝对位置和大小对组件进行布局。在容器的组件中可以使用”x、y”属性来指明组件在容器中的位置，及可以使用”width、height”属性来指明组件的大小，如此而已。一个例子：
var myWin = new Ext.Window({
height : 300,
width : 300,
layout : 'absolute',
autoScroll : true,
id : 'myWin',
border : false,
items : [
{
title : 'Panel1',
x : 50,
y : 50,
height : 100,
width : 100,
html : 'x: 50, y:100',
frame : true
},
{
title : 'Panel2',
x : 90,
y : 120,
height : 75,
width : 77,
html : 'x: 90, y: 120',
frame : true
}
]
});
myWin.show();
5.6、Ext.layout.FitLayout布局
容器的items中只有一个组件，并且这个组件将占据容器的全部显示空间，这就是就是fit布局。fit布局没有为容器或组件添加任何其他的配置属性。一个fit布局的例子：
var myWin = new Ext.Window({
height : 200,
width : 200,
layout : 'fit',
autoScroll : true,
border : false,
items : [
{
title : 'Panel1',
html : 'I fit in my parent!',
frame : true
}
]
});
myWin.show();
5.7、Ext.layout.AccordionLayout布局
AccordionLayout是FitLayout的直接子类。AccordionLayout布局以垂直堆叠的方式显示组件，并且，在任何一个时刻，只有一个item是展开的。一个AccordionLayout布局的例子：
var myWin = new Ext.Window({
height : 200,
width : 300,
border : false,
title : 'A Window with an accordion layout',
layout : 'accordion',
layoutConfig : {
animate : true
},
items : [
{
xtype : 'form',
title : 'General info',
bodyStyle : 'padding: 5px',
defaultType : 'field',
labelWidth : 50,
items : [
{
fieldLabel : 'Name',
anchor : '-10',
},
{
xtype : 'numberfield',
fieldLabel : 'Age',
width : 30
},
{
xtype : 'combo',
fieldLabel : 'Location',
anchor : '-10',
store : [ 'Here', 'There', 'Anywhere' ]
}
]
},
{
xtype : 'panel',
autoEl : {},
title : 'Bio',
layout : 'fit',
items : {
xtype : 'textarea',
value : 'Tell us about yourself'
}
},
{
title : 'Instructions',
html : 'Please enter information.',
tools : [
{id : 'gear'}, {id:'help'}
]
}
]
});
myWin.show();
运行实例：
发表评论
-
Panels、Windows和TabPanel
2011-08-16 09:40 15694、Panels、Windows和TabPanel ... -
Event、Component and Container
2011-08-16 09:35 14963、Event、Component and Cont ... -
Ext.Element
2011-08-15 13:44 18592、ExtJS的Heart—Ext.E ... -
Ext入门
2011-08-15 13:22 17211、ExtJS入门 1.1 ... -
Ext.decode 和 Ext.encode
2011-08-07 09:31 1705在述说这个例子之前，我假想 ... -
二级联动（省份城市）
2011-07-15 08:46 1179<!DOCTYPE HTML PUBLIC " ...
相关推荐
在MFC中，布局管理器是一个重要的组件，它负责自动调整控件的位置和大小，以适应窗口的变化。本篇文章将深入探讨"MFC布局管理器"，特别是描述中提到的"盒子布局管理器类CBoxLayout"。 MFC布局管理器的主要目标是...
AWT组件提供的6种布局管理器 AWT（Abstract Window Toolkit）组件提供了六种布局管理器，分别是BorderLayout、FlowLayout、GridLayout、GridBagLayout、CardLayout和BoxLayout。这些布局管理器可以帮助开发者更好地...
在QT中，布局管理是构建高效、适应性强的用户界面的关键技术之一。本压缩包文件包含了一系列针对QT布局管理的学习资源，帮助初学者深入理解和实践这一功能。 布局管理在QT中主要是通过QLayout类来实现的，它允许...
#### 一、布局管理器概览 在Java图形用户界面编程中，Swing作为一套强大的工具包，为开发者提供了丰富的组件和功能，其中布局管理器是构建美观且易于维护的GUI应用程序的关键部分。布局管理器负责自动地控制组件在...
本教程主要聚焦于“布局管理器”的使用，通过多个可运行的实例来深入讲解这一主题。布局管理器是用于组织和调整控件在窗口中的位置和大小的工具，它在QT Creator中尤其关键，因为QT是广泛应用于Linux以及其他平台的...
在编程领域，尤其是在开发图形用户界面（GUI）时，布局管理器是一个不可或缺的工具。本资料包"使用布局管理器布局界面.rar"聚焦于如何利用Java、C语言、C++、C#以及JSP等语言有效地设计和组织GUI组件。布局管理器是...
本主题聚焦于"MFC布局管理，模仿Winform布局控件"，意在提供一个MFC控件布局的解决方案，使其更接近C#的TableLayoutPanel控件。TableLayoutPanel在C#中是一种强大的布局工具，允许开发者以网格形式组织控件，具有...
标题中的“一款基于Prototype 1.6 的web布局管理器”指的是一个用于Web应用程序的布局解决方案，它构建在Prototype JavaScript库的1.6版本之上。Prototype是一个广泛使用的JavaScript框架，它提供了一系列工具来简化...
在创建一个JFrame或JPanel时，默认使用的布局管理器就是FlowLayout。例如，当你添加多个按钮时，它们会像文字一样自然地排列。 2. BorderLayout（边界布局） BorderLayout将窗口分为五个区域：北（North）、南...
本资源包“布局管理器的嵌套.rar”提供了深入讲解这一主题的相关资料，对于想要深入学习Android开发的人来说极具参考价值。 首先，文件“020505_布局管理器的嵌套.avi”很可能是一个视频教程，详细介绍了如何在...
Qt5中的布局管理器是构建GUI应用程序的核心工具之一，它帮助开发者自动调整控件在窗口中的位置和大小，以适应不同的屏幕分辨率和用户界面需求。本文将深入解析Qt5布局管理器的源码，探讨其工作原理和实现细节。 ...
在Android开发中，UI设计是至关重要的，而布局管理器（Layout Manager）则是构建用户界面的核心工具。Android提供了六种主要的布局管理器，每种都有其特定的用途和优势，使得开发者能够根据需求创建出各种各样的界面...
一、布局管理器 1. **Java Swing布局管理器**： - FlowLayout：按照从左到右，然后从上到下的顺序排列组件。 - BorderLayout：将界面分为北、南、东、西、中五个区域，每个区域只能放置一个组件。 - GridLayout...
GridLayout是最常用的布局管理器之一，它将父组件划分为一个二维网格，子组件可以占据一个或多个单元格。GridLayout通过`numColumns`属性确定网格的列数，同时通过`makeColumnsEqualWidth`属性可以控制所有列是否...
Java中的布局管理器是构建图形用户界面（GUI）的关键元素，它们负责自动调整和组织窗口内的组件。在Java AWT和Swing库中，布局管理器使得开发者无需精确设定每个组件的位置和大小，就能创建出适应不同屏幕尺寸和...
### 安卓布局管理器 #### 核心概念 在深入掌握Android布局知识之前，我们首先需要了解Android平台下的控件类基础。整个Android的布局和控件体系构建在几个核心类上，其中最基础的是`View`和`ViewGroup`。 **View...
在MFC中，界面布局管理是一项重要的任务，它涉及到如何在窗口中合理地安排控件的位置和大小，以实现用户友好的交互体验。本文将深入探讨MFC界面编程中的布局管理，并结合提供的文件"evaLayout"，介绍如何有效地进行...
本篇学习笔记主要探讨的是如何在Android应用中进行布局管理器的嵌套，这是一项提升界面复杂性和交互性的技术。我们将深入理解嵌套布局的工作原理，同时通过一个名为`NestedLayoutDemo`的实际项目来实践这些概念。 ...
Qt布局管理是Qt框架中的一个核心特性，它使得在用户界面上组织和调整控件的排列变得简单而高效。在Qt中，布局管理允许开发者自动调整窗口或对话框中的控件大小和位置，以适应不同的屏幕尺寸和分辨率，提供优秀的用户...