`
yesjavame
  • 浏览: 687244 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

《Ext详解与实践》节选：ColumnLayout的使用方法

EXTCSSBlog 
阅读更多
一直忙于筹备《Ext实战》一书，所以BLog很久没更新了，实在抱歉！现在书写得差不多了，把已经完成的节选一部分放上来，希望对大家有说帮助。
近来很多网站都在转载我Blog的文章，而且很多都不署名，对此深表遗憾，希望转载文章的网站能尊重一下作者的劳动，在转载时联系一下作者并将作者名字和转载出去署上。
废话不多说了，这次给大家节选的是ColumnLayout一节，希望能大家对ColumnLayout有新的认识。

<style> st1\:*{behavior:url(#ieooui) } </style> <style> <!-- /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"\@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; line-height:150%; mso-pagination:none; font-size:10.0pt; mso-bidi-font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:宋体; mso-font-kerning:1.0pt;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:842167345; mso-list-type:hybrid; mso-list-template-ids:-1837972440 -1997392486 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;} @list l0:level1 {mso-level-number-format:bullet; mso-level-text:■; mso-level-tab-stop:41.25pt; mso-level-number-position:left; margin-left:41.25pt; text-indent:-21.0pt; font-family:宋体;} @list l1 {mso-list-id:1534264948; mso-list-type:hybrid; mso-list-template-ids:882679276 881917756 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l1:level1 {mso-level-text:（%1）; mso-level-tab-stop:56.25pt; mso-level-number-position:left; margin-left:56.25pt; text-indent:-36.0pt;} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} --> </style>

CoulumnLayout是经常用到的布局类型，但也是让人感到迷惑的布局。主要原因是同一效果的定义方法有多种。笔者在早期的一篇博文虽然也做过讲解，但是因为例子写的是简洁的写法，反而没把问题说清楚，实在深感抱歉。

总体上说要达到同一效果，CoulumnLayout的定义方法有以下4种：

■一行定义一个CoulumnLayout，每列中只有一个控件

■只定义一个CoulumnLayout，每列中只有一个控件

■只定义一个CoulumnLayout，每列中有多个控件

■一行一个CoulumnLayout，每列中有多个控件

下面通过例子详细说明一下这4种方法以及它们的优缺点。这4种方法要实现的界面如图1。


图1

界面中定义了3行3列，其中第2行第3列没有控件，第三行则是需要紧凑结构，与前面两行不对等的3列。虽然是非常简单的一个界面，但是第2、4种定义方法如果不注意就会出现图2中的情况。

图2

（1）一行定义一个CoulumnLayout，每列中只有一个控件的定义方法

该方法是最笨的方法，但是却是最实用的方法，也是笔者强烈推荐的方法。

为什么说该方法笨呢？请先看以下源代码：

Ext.onReady(function(){

var frm = new Ext.form.FormPanel({

applyTo: "form1",

autoHeight: true,

width: 750,

frame: true,

labelWidth:80,

labelSeparator:"：",

title:'一行定义一个CoulumnLayout，每列中只有一个控件',

items:[

//第一行

{layout:'column',border:false,items:[

//第一列

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'textfield',fieldLabel:'一行一列',name:'text<chsdate w:st="on" year="2001" month="1" day="1" islunardate="False" isrocdate="False">1-1-1</chsdate>',anchor:'90%'}

]},

//第二列

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'textfield',fieldLabel:'一行二列',name:'text<chsdate w:st="on" year="2001" month="1" day="2" islunardate="False" isrocdate="False">1-1-2</chsdate>',anchor:'90%'}

]},

//第三列

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'textfield',fieldLabel:'一行三列',name:'text<chsdate w:st="on" year="2001" month="1" day="3" islunardate="False" isrocdate="False">1-1-3</chsdate>',anchor:'90%'}

]}

]},

//第二行

{layout:'column',border:false,items:[

//第一列

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'textfield',fieldLabel:'二行一列',name:'text<chsdate w:st="on" year="2001" month="2" day="1" islunardate="False" isrocdate="False">1-2-1</chsdate>',anchor:'90%'}

]},

//第二列

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'textfield',fieldLabel:'二行二列',name:'text<chsdate w:st="on" year="2001" month="2" day="2" islunardate="False" isrocdate="False">1-2-2</chsdate>',anchor:'90%'}

]}

]},

//第三行

{layout:'column',border:false,items:[

//第一列

{columnWidth:.25,layout: 'form',border:false,items: [

{xtype:'checkbox',fieldLabel:'三行一列',boxLabel:'三行一列',name:'text<chsdate w:st="on" year="2001" month="3" day="1" islunardate="False" isrocdate="False">1-3-1</chsdate>',anchor:'90%'}

]},

//第二列

{columnWidth:.15,layout: 'form',border:false,items: [

{xtype:'checkbox',hideLabel:true,boxLabel:'三行二列',name:'text<chsdate w:st="on" year="2001" month="3" day="2" islunardate="False" isrocdate="False">1-3-2</chsdate>',anchor:'90%'}

]},

//第三列

{columnWidth:.15,layout: 'form',border:false,items: [

{xtype:'checkbox',hideLabel:true,boxLabel:'三行三列',name:'text<chsdate w:st="on" year="2001" month="3" day="3" islunardate="False" isrocdate="False">1-3-3</chsdate>',anchor:'90%'}

]}

]}

]

});

看出该方法如何笨了吧？就是每定义一行就要重新定义一个CoulumnLayout：

{columnWidth:.3,layout: 'form',border:false,items: [[ /* 子组件 */]}

而且每行中的每列只定义一个控件：

//第一列

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'textfield',fieldLabel:'一行一列',name:'text<chsdate w:st="on" year="2001" month="1" day="1" islunardate="False" isrocdate="False">1-1-1</chsdate>',anchor:'90%'}

]},

这样不是要写多很多代码？确实够笨的。不过笔者认为笨不要紧，关键是能解决大问题。每行定义一个CoulumnLayout， 行与行之间相互独立起来，就不会互相影响了，尤其是定义第三行这样需要紧凑结构，不规则的行尤其适合。这样还有一个好处就是可以减少计算columnWidth的时间与配置tabIndex的问题。尤其是在已经有很多控件，要在中间中插入一个新的控件时，你会觉得还是该方法挺实用的。为什么会这样？请继续往下看其它方法。

（2）只定义一个CoulumnLayout，每列中只有一个控件的方法

该方法顾名思义，就是不管三七二十一，就只定义一个CoulumnLayout，分行的问题由列自己解决。

列是如何自动分行的？是通过属性columnWidth来实现的。分行的原则就是从第一列的columnWidth开始计算，每当n（n>=1）列的columnWidth的和超过1的时候就会自动换行，然后从第n列重新开始计算，依此类推直到最后一列。

明白这个原则后，咱们来看看该方法的源代码：

var frm2 = new Ext.form.FormPanel({

applyTo: "form2",

autoHeight: true,

width: 750,

frame: true,

labelWidth:80,

labelSeparator:"：",

title:'只定义一个CoulumnLayout，每列中只有一个控件',

items:[

{layout:'column',border:false,items:[

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'textfield',fieldLabel:'一行一列',name:'text<chsdate w:st="on" year="2002" month="1" day="1" islunardate="False" isrocdate="False">2-1-1</chsdate>',anchor:'90%'}

]},

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'textfield',fieldLabel:'一行二列',name:'text<chsdate w:st="on" year="2002" month="1" day="2" islunardate="False" isrocdate="False">2-1-2</chsdate>',anchor:'90%'}

]},

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'textfield',fieldLabel:'一行三列',name:'text<chsdate w:st="on" year="2002" month="1" day="3" islunardate="False" isrocdate="False">2-1-3</chsdate>',anchor:'90%'}

]},

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'textfield',fieldLabel:'二行一列',name:'text<chsdate w:st="on" year="2002" month="2" day="1" islunardate="False" isrocdate="False">2-2-1</chsdate>',anchor:'90%'}

]},

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'textfield',fieldLabel:'二行二列',name:'text<chsdate w:st="on" year="2002" month="2" day="2" islunardate="False" isrocdate="False">2-2-2</chsdate>',anchor:'90%'}

]},

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'panel',html:'&nbsp;',height:26}

]},

{columnWidth:.25,layout: 'form',border:false,items: [

{xtype:'checkbox',fieldLabel:'三行一列',boxLabel:'三行一列',name:'text<chsdate w:st="on" year="2002" month="3" day="1" islunardate="False" isrocdate="False">2-3-1</chsdate>',anchor:'90%'}

]},

{columnWidth:.15,layout: 'form',border:false,items: [

{xtype:'checkbox',hideLabel:true,boxLabel:'三行二列',name:'text<chsdate w:st="on" year="2002" month="3" day="2" islunardate="False" isrocdate="False">2-3-2</chsdate>',anchor:'90%'}

]},

{columnWidth:.15,layout: 'form',border:false,items: [

{xtype:'checkbox',hideLabel:true,boxLabel:'三行三列',name:'text<chsdate w:st="on" year="2002" month="3" day="3" islunardate="False" isrocdate="False">2-3-3</chsdate>',anchor:'90%'}

]}

]}

]

});

代码中只定义了一个CoulumnLayout，然后全是列定义。前面3个列的columnWidth都是0.3，再加上第4列的columnWidth就是1.2了，已经超过1了，因而从第4列开始是第2行了。第2行只有2个列，columnWidth的总和才0.6，再加上第3行的第1列的columnWidth才是0.85，还不到1，所以会出现图3的错误。解决办法就是增加一个空列来补足宽度：

{columnWidth:.3,layout: 'form',border:false,items: [

{xtype:'panel',html:'&nbsp;',height:26}

]},

注意到没有，在列中使用了一个高度为26，内容为一个空白字符的panel作为控件。为什么要这样呢？做个测试，把“&nbsp；”和高度先去掉，看看效果，问题依然如故。奇怪吧？这还是和CSS有关，一个空的DIV不占任何宽度和高度，所以在实际的HTML源代码中根本没把增加的columnWidth算进去。居然这样，就加回“&nbsp；”看看。奇怪了，图3的结果怎么还是错误的？不过和图2有些不同了，第3行第1列的位置偏下了。其实又是CSS作怪，高度不足引起的，再加入“height:<chmetcnv style="background-position: left bottom; background-image: url(res://ietag.dll/#34/#1001); background-repeat: repeat-x;" tabindex="0" w:st="on" unitname="”" sourcevalue="26" hasspace="False" negative="False" numbertype="1" tcsc="0">26<span style="font-family: 宋体;" lang="EN-US"><span lang="EN-US">”</span></span></chmetcnv>就一切正常了。

分享到：
| Oracle批量生成测试数据方法
评论
发表评论

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

相关推荐

    ext实例 ext操作步骤

    **EXT基本表格（GridPanel）介绍**：EXT的表格组件，即`Ext.grid.GridPanel`，是一种功能强大的数据展示工具。它可以与服务器端进行数据交互，支持排序、筛选、分页等功能。开发者可以自定义列头、行样式，甚至实现...

    EXT 布局 Layout 资料

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

    Ext布局类的介绍与使用

    NestedLayoutPanel的使用方法与BorderLayout类似，只是在配置上更加灵活，可以适应更复杂的布局需求。 在使用EXT布局时，还需要注意一些最佳实践。例如，应确保所有布局元素的大小是可计算的，避免使用百分比大小...

    Gwt-Ext基础-中级-进阶

    3. **Ajax集成**：将Gwt-Ext与其他Ajax库（如jQuery）集成，以利用它们的优势互补。 4. **测试与调试**：了解GWT的单元测试工具GwtTestCase，以及如何使用GWT的超级浏览器模式进行调试。 5. **最佳实践**：获取...

    EXT2.0帮助文档CHM版

    EXT2.0帮助文档CHM版是为EXT框架开发者提供的一款详尽的API参考手册，以方便用户理解和使用EXT库的各个组件和功能。EXT是一个流行的JavaScript库，主要用于构建富客户端Web应用程序，它提供了丰富的用户界面组件和...

    Ext2.0 form使用实例

    Ext2.0 Form 使用实例详解 在Web应用开发中，ExtJS库提供了强大的用户界面组件，其中FormPanel是用于创建复杂表单的重要组件。本文将详细介绍Ext2.0 FormPanel的使用，包括创建方法、控件配置以及布局管理。 首先...

    ext的课件，ppt版,适合有面向对象基础人士

    3. Column布局：由`Ext.layout.ColumnLayout`管理，将容器视为一列，子组件可以使用`columnWidth`或`width`属性定义其宽度，支持百分比和固定像素两种方式，适合创建多列内容展示。 4. Card布局：由`Ext.layout....

    gwt-ext 实例

    3. **创建UI组件**：使用gwt-ext库创建各种组件，如Grid、FormPanel、ComboBox等，并了解它们的属性、方法和事件处理。 4. **布局管理**：学习gwt-ext提供的布局管理器，如FitLayout、BorderLayout、ColumnLayout，...

    Ext10种布局

    - **定义**：通过 `Ext.layout.ColumnLayout` 类定义，布局名称为 `column`。 - **特点**： - 将容器视为一列，子元素可通过 `columnWidth` 或 `width` 属性指定其占据的列宽比例。 - `columnWidth` 用百分比表示...

    ext表单

    在FormPanel中，我们可以添加FieldSet来分组相关的表单元素，或者使用ColumnLayout或FitLayout等布局管理器来调整表单组件的显示方式。 数据绑定是EXT表单的一大特色，它允许表单组件与数据模型之间实时同步。这...

    ext三列拖动

    实现这个功能的关键在于使用`Ext.grid.header.Container`类和`Ext.grid.ColumnLayout`布局。`header.Container`负责管理所有列头，而`ColumnLayout`布局则处理列的布局和拖放行为。在配置Grid时，我们需要启用`...

    extjs3.0例子

    6. **Ext.layout**: 布局管理器，如`FitLayout`（自适应布局）、`BorderLayout`（边界布局）和`ColumnLayout`（列布局），它们决定了组件如何填充容器的空间。 7. **Ext.util.Event**: EXTJS的事件系统，允许组件...

    Ext教程.pptExt教程.pptExt教程.ppt

    3. **Column布局**：通过`Ext.layout.ColumnLayout`实现，视作一列，子元素可以指定`columnWidth`（百分比宽度）或`width`（固定像素宽度）来决定占据的列宽。可以混合使用这两种方式，灵活地调整列的宽度。 4. **...

    老师整理的extjs学习笔记

    `Ext.data.DataReader` 负责将原始数据转换为 Store 中可以使用的记录格式。例如，可以使用 `JsonReader` 将 JSON 数据转换为 Store 记录。 **7.4 Ext.data.DataWriter -- Ext.data.Store 的数据保存器** `Ext....

    基于ext的j2ee开发

    首先介绍了Ext框架的基本特性和优势，然后讨论了Ext与Struts2的整合方法，以及如何使用JSON作为前后端数据交换的格式。最后，文中还概述了Struts2、Spring和Ibatis之间如何进行整合，旨在构建一个完整的快速开发架构...

    EXT中文手册8

    ### EXT中文手册8：深入解析EXT框架的关键组件与布局管理 #### TreePanel与FormPanel：构建复杂用户界面的基石 `TreePanel` 和 `FormPanel` 是EXT框架中用于构建复杂用户界面的重要组件。 - **TreePanel**：作为...

    ExtJS之布局详解

    - **列布局（ColumnLayout）**：使用`layout: "column"`，子组件按列排列，可通过`columnWidth`或`width`指定列宽。 - **填充布局（FitLayout）**：通过`layout: "fit"`，使子组件完全填充其容器，适用于需要...

    ext中文手册 ExtJS实用简明教程

    5. **Ajax通信**：介绍如何使用Ajax进行异步数据请求，包括Ext.Ajax和Store的使用。 6. **API参考**：提供EXTJS 3.0所有类、方法和属性的详细说明。 **EXTJS实用简明教程** `ExtJS实用简明教程.pdf` 是一本面向...

    基于extjs的.NET3.5控件Coolite 1.0.0.34580(Preview预览版）

    ColumnLayout TableLayout 37. Removed [XType] Attribute and replaced with XType readonly property. Example (Old) [Xtype("window")] Example (New) protected override string...

    extjs布局全面讲解

    - **定义**：Column布局由类`Ext.layout.ColumnLayout`定义，布局名称为`column`。 - **特性**： - 将容器组件看作一列，支持通过`columnWidth`和`width`属性来控制列的宽度。 - `columnWidth`按百分比设置宽度，...

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