`
cruih
  • 浏览: 79863 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

ExtJS 中 layout 的几种布局风格

 
阅读更多

 

  • absolute
  • 顾名思义,在容器内部,根据指定的坐标定位显示 

     

  • accordion
  • 这个是最容易记的,手风琴效果 

     

  • anchor
  • 这个效果具体还不知道有什么用,就是知道注意一下 
    1.容器内的组件要么指定宽度,要么在anchor中同时指定高/宽, 
    2.anchor值通常只能为负值(指非百分比值),正值没有意义, 
    3.anchor必须为字符串值 

     

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

     

  • card
  • 像安装向导一样,一张一张显示 

     

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

     

  • fit
  • 一个子元素将充满整个容器(如果多个子元素则只有一个元素充满整个容器) 

     

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

     

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

    分享到:
    评论

    相关推荐

      Extjs fieldset两行两列布局

      在Extjs框架中,`FieldSet`是一种常见的组件,常用于组织一组相关的表单字段,并通过一个标题来标识这组字段的主题。本文将详细介绍如何使用Extjs实现一个两行两列布局的`FieldSet`。 #### 一、整体结构设计 首先...

      extjs4中panel的accordion布局以及treepanel导航

      4. `collapsible`属性控制是否可以折叠Panel,但在accordion布局中,这个属性是不必要的,因为所有子Panel都默认可以折叠。 5. 通过调整`width`、`height`等属性,可以定制Panel的尺寸,以适应不同屏幕大小和需求。 ...

      ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局

      布局管理器有多种类型,如'fit'(适应)、'border'(边界)、'hbox'(水平盒子)和'vertical'(垂直盒子)等,每种布局都有其特定的用途和配置选项。 例如,'fit'布局会使得所有子组件完全填充容器空间;'border'...

      ExtJS 3.4.0

      3. **布局管理**:框架中的布局管理器(Layout Manager)支持多种布局方式,如Fit布局、Border布局、Table布局等,可以根据需要灵活地组织组件的位置和大小。 4. **Ajax和JSON**:ExtJS 内置了对Ajax的全面支持,...

      extjs3.0 API 中英

      3. **布局管理**:ExtJS支持多种布局方式,如表布局(Table Layout)、流式布局(Form Layout)、绝对布局(Absolute Layout)等,可以根据不同场景灵活选择,满足各种布局需求。 4. **Ajax和数据接口**:ExtJS内置...

      EXTJS2 API

      3. **布局管理(Layouts)**:EXTJS2支持多种布局方式,如表布局(Table Layout)、流式布局(Form Layout)、绝对布局(Absolute Layout)等,可以灵活调整组件在容器中的排列和大小。 4. **Store和Model**:Store...

      ExtJS-Layouts.pdf

      ExtJS提供了一系列预定义的布局类型,每种布局都有其独特的特性和适用场景。下面将逐一介绍: #### Absolute(绝对布局) 绝对布局允许子项精确地定位在容器内,适合需要精细控制每个元素位置的场景。 #### ...

      ExtJS 学习的几个小例子

      "ExtJS 学习的几个小例子"这个主题表明我们将探讨一些基础到进阶的示例,这些示例可能涵盖了ExtJS的基本用法,特别是关于本地数据(JSON)的读取。 首先,让我们来了解一下ExtJS中的数据模型。在ExtJS中,数据通常...

      Extjs4 下拉树 TreeCombo

      最后,将创建的TreeCombo添加到页面布局中,可以是容器(如Viewport、Panel等)的一部分,也可以直接作为页面内容。 示例代码片段: ```javascript Ext.application({ name: 'MyApp', launch: function () { ...

      extjs portal组件代码

      在EXTJS中,"Portal"组件是一种特殊的布局方式,允许用户自定义和排列页面上的内容区块,类似于个人门户的功能。EXTJS 2.0版本虽然相对较老,但其Portal组件仍然具有很高的实用价值,特别是对于那些需要用户高度...

      ExtJs2.0简明教程

      ExtJS支持多种布局类型,每种布局都有自己的特点和适用场景。 #### 6.2 Border区域布局 Border布局将容器分为五个区域:上(top)、下(bottom)、左(left)、右(right)和中心(center)。每个区域都可以放置一个或多个...

      EXTJS产品级别管理后台源代码

      7. **响应式设计**:EXTJS支持移动设备,使用`Ext.viewport`和`Ext.layout.container.Box`等布局管理器,可以实现跨平台的响应式设计,确保在不同设备上都能提供良好的用户体验。 在压缩包文件`ysc-APDPlat-5e7a864...

      学习ExtJS fit布局使用说明

      - **宽度和高度设置无效:** 在`Fit`布局中,任何对子元素的宽度或高度进行的设置都会被忽略,因为它们会根据父容器自动调整大小。 - **仅显示第一个子元素:** 如果父容器包含多个子元素,`Fit`布局只会显示第一...

      Extjs大全深入浅出

      Extjs提供了多种布局管理器,例如Card Layout、Border Layout、Fit Layout等,它们能够帮助开发者高效地组织界面元素,创建美观且功能丰富的用户界面。 - **Card Layout**:允许在同一区域内显示多个容器,通过切换...

      extjs动态表单

      5. **布局(Layout)**:ExtJS提供多种布局模式,如表格布局、流式布局、绝对布局等,可以根据动态表单的复杂性选择合适的布局,确保界面的美观和易用。 6. **事件处理(Event Handling)**:动态表单中的事件处理...

      ExtJS使用笔记

      Ext.Container容器组件是页面布局中的重要元素,可以包含多个子组件,并且能够通过各种布局管理器控制子组件的布局。 布局管理器是ExtJS中的一个重要概念,它负责管理子组件的位置和尺寸。ExtJS提供多种布局管理器...

      ExtJS 2.0 实用简明教程之布局概述

      下面是对几种常用布局的简要介绍: 1. **Column Layout**(列布局):如示例代码所示,用于将容器分割成多个等宽或按比例划分的列。`columnWidth`配置项用于指定每列的宽度占比。 2. **Border Layout**(边界布局...

      Extjs4.0视频教程和源代码,另附文档翻译

      - **不同类型的Proxy**:详细介绍了几种常用的Proxy类型,如AjaxProxy、RestProxy等,以及它们的应用场景。 - **配置和使用Proxy**:通过实例演示了如何配置不同的Proxy类型,并在实际项目中使用它们。 ### 读写器...

    Global site tag (gtag.js) - Google Analytics