Extjs4 常用布局总结

1.anchor 固定布局

子组件尺寸相对于容器的尺寸,即父容器容器的大小发生变化时,使用anchor布局的组件会根据规定的规则重新渲染位置和大小( width:500,height:300, )。一般与布局column一起使用。设置相对于父容器的百分比。

2.absolute 绝对布局 X/Y坐标定位

3.accordion 手风琴布局 类似于QQ面板的好友分组

4.border    边框布局  将容器分为 east south west north center 5部分

5.card      卡片布局  类似于tabpanel

card布局一次只能够显示一个面板

card布局提供方法让我们可以在一堆特定面板之间来回切换

6.table  表格布局  常用属性 columns   colspan  rowspan

7.column 列布局    常用属性 columns   columnwidth (相比较table而言有点类似 但是column布局无法调整 每个控件之间的间隔,只能采用样式来处理 sample:style:"margin-left:10px;margin-right:10px;",)

8.fit 布局

子元素将自动填满整个父容器(对元素设置宽度无效),如果容器组件中有多个子元素,则只会显示第一个子元素。

9.form 表单布局

FormPanel有两种布局:form和column,form是纵向布局,column为横向布局。默认为后者。使用layout属性定义布局类型。对于一个复杂的布局表单,最重要的是正确分割,分割结果直接决定布局能否顺利实现。

如果不再使用默认布局,那么我们必须为每一个元素指定一种布局方式,另外,还必须遵循以下几点:

【1】落实到任何一个表单组件后,最后总是form布局

【2】defaultType属性不一定起作用,必须显式为每一个表单组件指定xtype或new出新对象

【3】在column布局中,通过columnWidth可以指定列所占宽度的百分比,如占50%宽度为.5。

以上是extjs的几种常用布局  实际开发经常要将几种布局混合使用进行页面布局  这就要求我们必须熟练掌握每种布局的特点。

网上其他相关总结链接:

http://my.oschina.net/u/1398304/blog/291341

http://www.myexception.cn/javascript/2018318.html

http://www.iteye.com/topic/1135763

http://www.cnblogs.com/knowledgesea/archive/2013/08/28/3286661.html

http://wenku.baidu.com/link?url=6rNzED6IFoCOipxJLizPIamjR-R8d0iRNvJeWfR99nopeLrVRpdWIIIokF2Bi1LoR1e1VYVit_ZBuJvr-tJ2fPVfV--PyPJT1cDUV6eFYbW

自己以前总结的 写个博文以备不时之需。

时间: 2024-08-04 21:38:45

Extjs4 常用布局总结的相关文章

ExtJs4常用配置方法备忘

viewport布局常用属性 new Ext.Viewport({ layout: "border", renderTo: Ext.getBody(), defaults: { bodyStyle: "background-color: #FFFFFF;", frame: true }, //split为true,即可达到上下左右拉伸效果 //layout:fit,填满布局 //collapsible:true,north模块被收缩到最上面 items: [{ re

EXTJS常用布局详解

ExtJS的容器组件都可以通过设置layout参数来选择布局改变显示风格, 它的有效值有: absolute:控制位置,accordion:手风琴布局,anchor:控制大小,border:边界式布局,card:卡片布局,column:列布局,fit:填充式布局,form:表单布局,table:表格式布局 一共9种,在这里简单总结一下 absolute:Absolute布局的目的是为了扩展布局的属性,使得布局更容易使用 accordion:accordion布局也称手风琴布局,在accordio

常用布局,div竖直居中

常用两列布局,多列布局和div竖直居中 body { margin: 0; padding: 0; } .w200 { width: 200px; } .mar-left200 { margin-left: 200px; } .red { background-color: red; } .middle { vertical-align: middle; } .block { width: 80%; height: 300px; border: 1px solid #eee; margin: 0

ExtJs4.1布局详解

Border布局: Ext.onReady(function(){ Ext.QuickTips.init(); Ext.create('Ext.container.Viewport', {   //一般是渲染到viewport中 title: "table布局的面板", layout:'border', defaults: { collapsible: true,  //可收起 split: true, bodyStyle: 'padding:15px' }, items: [{ ti

跟我学android-android常用布局介绍

在上一章我们曾经谈到,Android平台的界面 是使用XML的方式设计的,然后在上一章我们只做了一个简单的界面,在这章,我们将介绍如何使用常用的控件设计实用的界面. Android中的视图都是继承View的.Android的视图分2种,一种是普通的视图,一种是ViewGroup.他们的区别在于,ViewGroup里可以放很多普通视图,我们常见的布局就是一种ViewGroup. Android中布局是用来排版的,以下是Android中常用的布局列表 名称 说明 LinearLayout 线性布局

Android常用布局类整理(一)

Android常用布局类整理 最近又回头做了一下android的项目,发觉越来越不从心,很多东西都忘了,简单的页面布局也很多写不出来,首先还是先整理一下一些会混淆的概念先 layout_width/layout_height的两种不同的方式 ① wrap_content能包裹其中的内容即可 ② fill_parent/match_parent 填满父视图的空间 LinearLayout 按垂直(vertical)或水平(horizontal)对齐每一个子视图,它包含的子控件将以横向或竖向的方式排

android常用布局

一.线性布局LinearLayout 作用:将容器中的组件一个挨一个地排列起来,不仅可以控制各组件横向排列也可以控制各组件纵向排列(通过android:orientation属性控制) 特点:线性布局不会换行当组件一个爱一个地排列到头之后剩余的组件不会显示 属性: android:gravity   设置布局管理器内组件的对齐方式,该属性支持top,bottom,left,right,center_vertical,fill_vertical,center_horizontal,fill_hor

ExtJs常用布局--layout详解(含实例)

序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor 另外,不常见的布局有:tab.vbox.hbox 本文所有实例代码已提供下载,下载链接:ExtJs常用布局--layout详解实例代码 简介: 最常用的边框布局--BorderLayout 最简单的布局--FitLayout 制作伸缩菜单的布局--Accordion 实现操作向导的布局--CardL

Android常用布局和控件

一.Android常用布局属性 1. LinearLayout的特有属性 android:orientation:设置布局排列方式   android:layout_weight:设置所占布局的权重   android:weightSum:设置最大权重和 2. RelativeLayout的特有属性 属性值为“true”或“false”android:layout_centerHrizontal:位于父控件的横向中间位置android:layout_centerVertical:位于父控件的纵向