`
qinysong
  • 浏览: 192876 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

Ext 布局Layout使用总结

EXTIDEAUIHTML 
阅读更多
布局Layout的一些概念：
区域（region）：任何一个封闭的DOM元素，例如body，div，span等
布局管理器（layout manager）：负责管理页面中的区域。在Ext中布局管理的主要的用户组件是BorderLayout类。在BorderLayout中划分好了一些预定的区域。可用的区域分别有south, east, west, north,和center。每一个BorderLayout对象都提供这些区域，但只有center要求必须使用的。
面板（Panel）：是区域管理（region management）的另外一个组件。面板也相当于一个容器，它将页面元素（div等）与布局layout中的区域进行关联。
 
使用示例一：简单的布局
使用说明：
第一步：
创建BorderLayout对象layout，并指定layout的容器为document.body，在这个layout中包括四个区域，分别对应BorderLayout预置的north、south、west和center，对于每一区域都可以进行各种属性的设置，包括宽度、是否带有标题、是否可伸缩等等，代码示例如下
js 代码
  1. var layout = new Ext.BorderLayout(document.body, {   
  2.      north: {   
  3.          split:false,   
  4.          initialSize: 35   
  5.      },   
  6.      south: {   
  7.          split:false,   
  8.          initialSize: 20   
  9.      },   
  10.      west: {   
  11.          split:false,   
  12.          initialSize: 200,   
  13.          collapsible: false  
  14.      },   
  15.      center: {   
  16.          autoScroll: true  
  17.      }   
  18.  });   
 
第二步：
为layout填充内容，分别为north、south、west和center填充了相应的内容面板ContentPanel，layout.beginUpdate()和layout.endUpdate()表示在其间的添加过程中先不要对加入的对象排版布局。这样的好处是避免了ContentPanel有对象加入时，导致UI的刷新，改进了整体的用户体验。如下所示：
js 代码
  1. layout.beginUpdate();   
  2. layout.add('north', new Ext.ContentPanel('header', {fitToFrame:true}));   
  3. layout.add('south', new Ext.ContentPanel('footer', {fitToFrame:true}));   
  4. layout.add('west', new Ext.ContentPanel('nav', {fitToFrame:true}));   
  5. layout.add('center', new Ext.ContentPanel('content'));   
  6. layout.endUpdate();  
 
第三步：
页面区域内容，在html页面中可以通过div进行区域内容设置，如下
html代码
  1. <div id="header" class="x-layout-inactive-content">  
  2.     ......   
  3. </div>  
  4. <div id="nav" class="x-layout-inactive-content">  
  5.     ......    
  6. </div>  
  7. <div id="content" class="x-layout-inactive-content">  
  8.       ......   
  9. </div>  
  10. <div id="footer" class="x-layout-inactive-content">  
  11.       ......   
  12. </div>  
 
效果图如下：
  •  
     
    使用示例二：嵌套的布局
    嵌套的布局可以通过在BorderLayout里面添加BorderLayout来实现，这中间需要NestedLayoutPanel来对里面的BorderLayout包装，代码示例如下：
    js 代码
    1. var layout = new Ext.BorderLayout(document.body, {   
    2.     west: {   
    3.         split:true,   
    4.         initialSize: 200,   
    5.         titlebar: true,   
    6.         collapsible: true,   
    7.         minSize: 100,   
    8.         maxSize: 400   
    9.     },   
    10.     center: {   
    11.         autoScroll: false  
    12.     }   
    13. });   
    14. layout.beginUpdate();   
    15.     
    16. layout.add('west', new Ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));   
    17. var innerLayout = new Ext.BorderLayout('content', {　//嵌套的layout   
    18.     south: {   
    19.         split:true,   
    20.         initialSize: 200,   
    21.         minSize: 100,   
    22.         maxSize: 400,   
    23.         autoScroll:true,   
    24.         collapsible:true,   
    25.         titlebar: true  
    26.     },   
    27.     center: {   
    28.         autoScroll:true  
    29.     }   
    30. });   
    31. innerLayout.add('south', new Ext.ContentPanel('inner1', "More Information"));   
    32. innerLayout.add('center', new Ext.ContentPanel('inner2'));   
    33. layout.add('center', new Ext.NestedLayoutPanel(innerLayout));　//嵌套包装   
    34. layout.endUpdate();   
     
    Layout布局属性说明（自己的理解翻译可能不准确）：
    split:true, 边框是否可以拖动
    initialSize: 200, 初始大小
    titlebar: true, 是否带有标头栏
    collapsible: true, 是否可以卷缩
    minSize: 100, 最小大小
    maxSize: 400 最大大小
     
    页面效果如：
     
    • 分享到：
    | Ext菜单器件相关类层次结构分析
    评论
    9 楼 hanjiangit 2009-09-17  
    我也出现这个错误 var layout = new Ext.BorderLayout(document.body, { 
    总是这行报缺少对象错误。为什么啊 ？ 
    8 楼 sujiangliu 2008-11-09  
                     
    7 楼 sujiangliu 2008-11-09  
    框是否可以拖
    6 楼 iampurse 2008-10-09  
    - - 应该是1.1和2.0的区别吧。
    5 楼 wcj12168 2008-09-01  
    我也报一楼那样的错误，是怎么回事？
    4 楼 ttangmin520 2008-04-15  
    我 这样写的时候
    var layout = new Ext.BorderLayout(document.body, { 
    总是这行报缺少对象错误。为什么啊 ？ 
    3 楼 aliang888 2007-10-20  
    有点懂了
    2 楼 yueyang 2007-10-04  

    不知道在2.0里面如何在一个tabs里面嵌套一个其它的对象呢？
    1 楼 forgetdavi 2007-09-09  
     
    发表评论

    您还没有登录,请您登录后再发表评论

    相关推荐

      EXT 布局 Layout 资料

      ### EXT 布局 Layout 资料详解 #### 6.1 布局概述 在 Ext JS 中，布局（Layout）是一个重要的概念，它指的是容器组件内子元素的排列方式。Ext JS 的所有容器组件都支持布局操作，并且每个容器都有一个对应的布局...

      ext2.0 layout布局(使用viewport)

      ext2.0 layout布局(使用viewport),将其部署到php服务器上，可以查看效果：适合一般的应该工作界面，有滑动菜单和树形菜单等，初步实现了一个不错的应用视图框架

      ext布局layout各组件动态生成并相互交互

      发现目前网上 ext　layout 例子虽然各项功能可以实现但是无法应用到真实项目中　因为大部分例子其中的各组件是静态写成的　只是动态的通过对象名调用　实际开发中各组件多为动态生成　因为即时数据：不能定义对象名...

      ext布局layout各组件动态生成并相互交互2

      发现目前网上 ext　layout 例子虽然各项功能可以实现但是无法应用到真实项目中　因为大部分例子其中的各组件是静态写成的　只是动态的通过对象名调用　实际开发中各组件多为动态生成　因为即时数据：不能定义对象名...

      ext布局(Layout.html)例子.pdf

      在实际应用中，EXT布局的配置和使用需要配合HTML、CSS以及JavaScript进行。例如，`&lt;script&gt;`标签引入了EXT库的CSS和JS文件，以确保布局正常工作。`Ext.onReady`函数是EXT框架的启动点，确保DOM加载完毕后再执行相关...

      ext布局(Layout.html)例子[参考].pdf

      【EXT布局(Layout.html)详解与应用】 EXT是一个强大的JavaScript库，专用于构建富...在实际开发中，选择合适的布局模式对于提升用户体验至关重要，因此理解并熟练掌握EXT布局的使用方法是提升Web应用程序质量的关键。

      EXT制作的布局，使用border layout, 稍做改动即可添加到自己的项目里， 简单实用。让你感受EXT的强大

      在EXT中，布局（Layout）是一种核心特性，它负责管理组件（Components）在容器（Container）中的排列和尺寸调整。本示例主要讲解了EXT如何利用Border Layout实现一个简单而实用的布局设计。 Border Layout是EXT中的...

      ExtJs4 layout 布局

      ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档，详细讲诉了各种布局，并附源码与界面展示，希望能给你带来帮助

      ExtJs常用布局--layout详解实例代码

      ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

      Ext布局类的介绍与使用

      在Web开发中，界面布局设计是提升用户体验的关键因素之一。EXT框架提供了一套强大的布局管理机制，使得开发者能够轻松创建复杂且响应式的用户...熟练掌握EXT布局的使用，可以极大地提升Web应用的用户体验和开发效率。

      Ext10种布局

      - **定义**：`Ext.layout.ContainerLayout` 是 ExtJS 的基础布局类，其他所有布局都基于此基类进行扩展。 - **作用**：当没有为容器指定任何布局时，默认采用 `ContainerLayout`。该布局简单地将所有子元素按顺序...

      Ext table布局实例 formpanel的table布局

      1. **form layout**：设置`layout: 'form'`，让formpanel使用form布局，这是一种默认的布局方式，自动根据组件宽度进行排列。 2. **table layout**：若要切换到table布局，需设置`layout: { type: 'table', columns...

      ext4文件系统的硬盘布局(英语版)

      总结来说，ext4文件系统在磁盘上的布局结构是非常复杂的，它涵盖了多个重要组成部分，如超级块、块组描述符、位图、inode表、目录项、扩展属性、多点挂载保护以及日志机制等。这些组成部分共同保证了文件系统的稳定...

      GWT-ext 布局示例

      通过实现 `com.gwtext.client.widgets.layout.HorizontalLayout` 类，可以设置Panel的布局为水平布局。每个子组件会按照添加到父容器的顺序从左到右显示，如代码清单1所示。这将创建出如图1所示的布局。 2. **垂直...

      Ext常用布局

      总结来说，Ext中的Fit布局和Border布局提供了灵活的布局方案，可以满足不同类型的UI设计需求。Fit布局适合于单个组件完全填充容器的情况，而Border布局则适用于需要多区域划分的复杂界面。理解并熟练运用这些布局...

      Ext介绍以及_ext页面布局

      layout: "border", // 使用Border布局 items: [northPanel] // 添加到布局中 }); ``` 这个例子中，`northPanel`被添加到了北部区域。你可以根据需要添加更多的面板到其他区域，如`west`、`east`、`south`和`center...

      Ext布局类的介绍与使用的例程

      Ext布局类是Ext JS库中的核心组件之一，用于在页面上组织和管理控件的布局。这个强大的功能允许开发者创建复杂、响应式的用户界面。在本文中，我们将深入探讨`borderlayout`，这是一种常见的布局模式，它将容器分为...

      ext实例 ext操作步骤

      3. **Column布局**：使用`Ext.layout.ColumnLayout`，将容器视为一列，通过`columnWidth`或`width`属性来设定子组件占据的列宽，适合创建多列并行展示的内容。 4. **Card布局**：由`Ext.layout.CardLayout`定义，只...

      ext4.0学习总结及使用说明

      ### ext4.0 学习总结及使用说明 #### 一、引言 随着技术的发展，文件系统的更新迭代显得尤为重要。Linux操作系统中的ext4作为ext3的继任者，不仅继承了其诸多优点，还引入了一系列重要的改进措施，极大地提升了...

    Magicbox
    Global site tag (gtag.js) - Google Analytics