- 浏览: 83822 次
- 性别:
- 来自: 武汉
-
文章分类
最新评论
-
package：
不知楼主 是否试过火狐下面报错.....b.firstChil ...
EXTjs grid双层表头的实现 (源代码和示例) -
少年阿郎：
请把你的demo发到我的邮箱15251855442@163.c ...
Ext DateField控件 - 只选择年月 -
岳阳楼：
提示错误：消息: 'prototype' 为空或不是对象行: ...
Ext DateField控件 - 只选择年月 -
hellostory：
引用执行“清除”操作后，问题解决了。 请问如何执行清除操作。。 ...
SVN错误：Attempted to lock an already-locked dir -
jxxms：
可以用，非常好
Ext DateField控件 - 只选择年月
所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext的所有容器组件都支持而局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等。
ExtJS的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS的容器组件包含一个layout及layoutConfig配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息，如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局，该布局只是简单的把元素放到容器中，有的布局需要layoutConfig配置，有的则不需要layoutConfig配置。看代码：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
width:400,
height:200,
layout:"column",
items:[{columnWidth:.5,
title:"面板1"},
{columnWidth:.5,
title:"面板2"}]
});
});
上面的代码我们创建了一个面板Panel，Panle是一个容器组件，我们使用layout指定该面板使用Column布局。该面板的子元素是两个面板，这两个面板都包含了一个与列布局相关的配置参数属性columnWidth，他们的值都是0.5，也就是每一个面板占一半的宽度。执行上面的程序生成如下图所示的结果：
Ext中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。
ExtJS2.0一共包含十种布局，常用的布局有border、column、fit、form、card、tabel等布局，下面我们分别对这几种布局作简单的介绍。
《ExtJS2.0实用简明教程》之Border区域布局
Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码：
Ext.onReady(function(){
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:50,
title:"顶部面板"},
{region:"south",
height:50,
title:"底部面板"},
{region:"center",
title:"中央面板"},
{region:"west",
width:100,
title:"左边面板"},
{region:"east",
width:100,
title:"右边面板"}
]
});
});
执行上面的代码将会在页面中输出包含上下左右中五个区域的面板，如下图所示：
《ExtJS2.0实用简明教程》之Column列布局
Column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。看下面的代码：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",width:100},
{title:"列2",width:200},
{title:"列3",width:100},
{title:"列4"}
]
}
);
});
上面的代码在容器组件中放入了四个元素，在容器组件中形成4列，列的宽度分别为100,200,100及剩余宽度，执行结果如下图所示。
也可使用columnWidth来定义子元素所占的列宽度，看下面的代码：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",columnWidth:.2},
{title:"列2",columnWidth:.3},
{title:"列3",columnWidth:.3},
{title:"列4",columnWidth:.2}
]
}
);
});
注意columnWidth的总和应该为1，执行代码将生成如下图所示的内容：
在实际应用中还可以混合使用，看下面的代码：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",width:200},
{title:"列2",columnWidth:.3},
{title:"列3",columnWidth:.3},
{title:"列4",columnWidth:.4}
]
}
);
});
执行上面的代码将会生成如下图所示的结果：
《ExtJS2.0实用简明教程》之Fit布局
Column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。看下面的代码：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",width:100},
{title:"列2",width:200},
{title:"列3",width:100},
{title:"列4"}
]
}
);
});
上面的代码在容器组件中放入了四个元素，在容器组件中形成4列，列的宽度分别为100,200,100及剩余宽度，执行结果如下图所示。
再看使用Fit布局后的代码，如下：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"fit",
width:500,
height:100,
items:[{title:"子元素",html:"这是子元素中的内容"}
]
}
);
});
上面的代码指定父容器使用Fit布局，因此子将自动填满整个父容器。输出的图形如下：
如果容器组件中有多个子元素，则只会显示一个元素，如下面的代码：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"fit",
width:500,
height:100,
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"}
]
}
);
});
输出的结果如下：
如果不使用布局Fit，代码如下：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
width:500,
height:120,
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"}
]
}
);
});
输出的结果如下图所示：
《ExtJS2.0实用简明教程》之Form布局
Form布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。看下面的代码：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
width:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"请输入姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
]
}
);
});
上面的代码创建了一个面板，面板使用Form布局，面板中包含三个子元素，这些子元素都是文本框字段，在父容器中还通过hideLabels、labelAlign等配置属性来定义了是否隐藏标签、标签对齐方式等。上面代码的输出结果如下图所示：
可以在容器组件中把hideLabels设置为true，这样将不会显示容器中字段的标签了，如下图所示：
在实际应用中，Ext.form.FormPanel这个类默认布局使用的是Form布局，而且FormPanel还会创建与 <form> 标签相关的组件，因此一般情况下我们直接使用FormPanel即可。上面的例子可改写成如下的形式：
Ext.onReady(function(){
new Ext.form.FormPanel({
renderTo:"hello",
title:"容器组件",
width:300,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"请输入姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
]
}
);
});
程序结果与前面使用Ext.Panel并指定form布局的一样，如下图所示：
《ExtJS2.0实用简明教程》之Accordion布局
Accordion布局由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。来看下面的代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
width:500,
height:200,
layout:"accordion",
layoutConfig: {
animate: true
},
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"},
{title:"子元素3",html:"这是子元素3中的内容"}
]
}
);
});
上面的代码定义了一个容器组件，指定使用Accordion布局，该容器组件中包含三个子元素，在layoutConfig中指定布局配置参数animate为true，表示在执行展开折叠时是否应用动画效果。执行结果将生成如下图所示的界面：
点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板，如下图：
《ExtJS2.0实用简明教程》之Card布局
Card布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。看下面的代码：
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:"hello",
title:"容器组件",
width:500,
height:200,
layout:"card",
activeItem: 0,
layoutConfig: {
animate: true
},
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"},
{title:"子元素3",html:"这是子元素3中的内容"}
],
buttons:[{text:"切换",handler:changeTab}]
}
);
var i=1;
function changeTab()
{
panel.getLayout().setActiveItem(i++);
if(i>2)i=0;
}
});
上面的代码创建了一个容器组件面板，面板中包含三个子面板元素，父容器包含一个“切换”按钮，点击该按钮将会执行changeTab函数，该函数实现把父容器中的活动面板在三个子元素之间进行切换。程序的执行结果如下所示：
点击一下“切换”按钮，结果如下图所示：
《ExtJS2.0实用简明教程》之able布局及其它布局
Table布局由类Ext.layout.TableLayout定义，名称为table，该布局负责把容器中的子元素按照类似普通html标签
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:"hello",
title:"容器组件",
width:500,
height:200,
layout:"table",
layoutConfig: {
columns: 3
},
items:[{title:"子元素1",html:"这是子元素1中的内容",rowspan:2,height:100},
{title:"子元素2",html:"这是子元素2中的内容",colspan:2},
{title:"子元素3",html:"这是子元素3中的内容"},
{title:"子元素4",html:"这是子元素4中的内容"}
]
}
);
});
上面的代码创建了一个父容器组件，指定使用Table布局，layoutConfig使用columns指定父容器分成3列，子元素中使用rowspan或colspan来指定子元素所横跨的单元格数。程序的运行效果如下图所示：
除了前面介绍的几种布局以外，Ext2.0中还包含其它的Ext.layout.AbsoluteLayout、Ext.layout.AnchorLayout等布局类，这些布局主要作为其它布局的基类使用，一般情况下我们不会在应用中直接使用。另外，我们也可以继承10种布局类的一种，来实现自定义的布局。
发表评论
-
ExtJs grid中常用属性 总结
2011-08-29 11:07 2419问题：使用Grid时，如果出现列标题与复选框错位 使用定 ... -
ExtJS 中xtype和 class对照表
2011-08-25 08:55 1026xtype Class ... -
EXTjs grid双层表头的实现 (源代码和示例)
2011-08-11 14:34 2936源代码:加载到页面中的js文件GridDoubleHead ... -
Extjs Grid相关组件及属性
2011-08-11 14:14 1616Ext.grid.GridPanel ... -
EXT的formpanel中的横向排列布局
2011-06-29 09:52 3201利用formpanel的form和column属性混合使用来 ... -
EXT中将grid的sm选择项动态添加到ComboBox
2011-06-29 09:09 1239//创建ComboBox的数据源 var itemDs = ... -
EditorGridPanel组件中根据条件取消某一行的编辑状态
2011-03-16 10:40 1104var dataClearGrid = new Ext.gri ... -
Ext.grid.GridPanel中的符合条件的某行不能选择
2011-03-15 14:10 1709让Ext.grid.GridPanel不能选择，即令Ext.g ... -
Ext中从grid 到tree的拖拽
2011-03-15 09:23 1490// 使用一个Json数据结构作为tree的本地数据源 ... -
Ext.grid.ColumnModel 后期通过setEditor设置editor
2011-02-28 15:52 3360Ext.grid.EditorGridPanel 顾名思义就是 ... -
Ext.ux.form.FileUploadField 重置的问题
2011-02-24 13:52 1587Js代码 text: '重置', ... -
EXT 树的配置详细属性介绍
2011-02-23 17:37 12931、Ext.tree.TreePanel 主要配 ... -
Ext.data.Store
2011-02-10 15:08 1021Ext.data.Store是EXT中用来进行数据交换和数据交 ... -
如何将string类型的数据如何显示在Ext的datefield中
2010-11-18 10:42 1259//返回的String的数据先格式化处理 obj.month ... -
Ext DateField控件 - 只选择年月
2010-11-18 09:44 4716var monthField = new Ext.u ... -
动态修改Ext控件的readOnly属性
2010-11-17 11:37 1902Ext 控件的readOnly属性是可以在控件初始化过程中 ... -
EXT表单组件常见属性介绍（三）
2010-11-17 11:25 1737本范例展示如何使用表单的各种组件。 下拉框组件展示了5种 ... -
EXT表单组件常见属性介绍（二）
2010-11-17 11:24 13651、Ext.form.Hidden 2、Ex ... -
EXT表单组件常见属性介绍（一）
2010-11-17 11:23 11791、Ext.form.Action 配置项： ... -
ext的 renderer的function参数详细介绍
2010-11-12 09:31 1521renderer:function(value, cellm ...
相关推荐
以下是对EXT布局中几种常见布局方式的详细说明： 1. Column布局： Column布局将容器分割成多列，每列的宽度可以通过`columnWidth`指定为百分比，或者通过`width`指定为像素值。例如，如果你想创建三列等宽的布局，...
以下将详细介绍EXT布局中的几种主要类型及其应用场景。 1. **Column布局**：此布局将容器划分为多列，每列的宽度可以通过`columnWidth`指定为百分比值。例如，设置`layout: "column"`后，可以分配列的相对宽度，...
在布局方面，ExtJS 提供了几种不同的布局模式，以适应各种UI设计需求。以下简要介绍了四种基本布局： 1. **Accordion布局**：这种布局将所有子元素折叠在一个区域内，每次只能展开一个元素。适用于展示一系列可折叠...
在Extjs框架中，`FieldSet`是一种常见的组件，常用于组织一组相关的表单字段，并通过一个标题来标识这组字段的主题。本文将详细介绍如何使用Extjs实现一个两行两列布局的`FieldSet`。 #### 一、整体结构设计 首先...
此外，扩展EXT组件也是开发中常见的需求，这可能涉及修改现有组件的行为或外观，甚至创建全新的组件。文档中详细介绍了从创建新文件到完成组件扩展的全过程，帮助开发者快速上手。 #### 8. EXT的布局(Layout) 布局...
- **卡片布局 (Card Layout)**: 适合在一个容器中切换不同的内容页面。 - **表格布局 (Table Layout)**: 用于展示数据表格时的布局。 - **流式布局 (Fit Layout)**: 自动填充容器的宽度和高度。 - **绝对定位布局 ...
在本例中，包含了几种不同类型的字段： 1. **隐藏字段**: 如`{xtype:"hidden", id:"id", name:"id"}`，这种字段主要用于存储一些不需要用户填写但对后端处理有帮助的数据。 2. **文本输入字段**: 这是最常见的...
3. **ExtJS的Portal功能**：Portal是ExtJS中的一种布局模式，常用于创建可定制的仪表板。用户可以通过拖放操作来添加、删除或重新排列Portlets（即小部件），提供高度可定制的用户体验。 4. **js做的Portal**：虽然...
在EXT JS库中，下拉菜单（Dropdown Menu）是一种常见的组件，用于提供多个选项供用户选择。EXT JS是一个强大的JavaScript库，专为构建富客户端Web应用程序而设计，它提供了丰富的UI组件和数据绑定机制。然而，从标题...
9. **EXT.layout**：布局管理器是EXT.js中非常重要的一部分，它负责管理组件的排列和大小调整，确保组件在不同屏幕尺寸下都能正确显示。 10. **Ajax生命周期**：理解Ajax请求的生命周期至关重要，包括请求的初始化...
布局管理器有多种类型，如'fit'（适应）、'border'（边界）、'hbox'（水平盒子）和'vertical'（垂直盒子）等，每种布局都有其特定的用途和配置选项。 例如，'fit'布局会使得所有子组件完全填充容器空间；'border'...
常见的数据视图类包括`Ext.DataView`、`Ext.grid.GridPanel`、`Ext.form.Field`等。 - **Ext.DataView**：这是一个比较特殊的视图类，因为它没有预设的显示模式，而是需要开发者自行定义显示模板。`Ext.XTemplate`...
每种布局管理器都有其独特的用途和配置选项，开发者可以根据实际需求选择合适的布局管理器。 #### 六、ExtJS 表单 -- Ext.form.FormPanel **6.1 FormPanel 表单** `Ext.form.FormPanel` 是用于创建表单的组件。它...
下面是对几种常用布局的简要介绍： 1. **Column Layout**（列布局）：如示例代码所示，用于将容器分割成多个等宽或按比例划分的列。`columnWidth`配置项用于指定每列的宽度占比。 2. **Border Layout**（边界布局...
ExtJS提供了多种布局类型，每种布局都有其独特的用途和适用场景。 #### 常见布局类型 - **Border区域布局类（Border Layout）**：将容器分为五个区域：东、南、西、北和中心，适合于复杂的应用界面设计。 - **...
通常可以通过以下几种方式来获取： - **官方网站下载**：访问ExtJS官方网站下载最新版本或指定版本的库。 - **CDN**：通过CDN服务引入ExtJS库，这种方式无需本地部署，减轻了服务器负担。 - **包管理器**：如使用npm...
Ext.Container容器组件是页面布局中的重要元素，可以包含多个子组件，并且能够通过各种布局管理器控制子组件的布局。 布局管理器是ExtJS中的一个重要概念，它负责管理子组件的位置和尺寸。ExtJS提供多种布局管理器...
Table布局由`Ext.layout.TableLayout`类定义，通过设置行列来实现控件的布局。该布局允许用户自定义行列的数量，并支持行列的合并。 - **Table布局的特点**： - **类似于HTML表格**：Table布局的运作机制与HTML中...
ExtJS 4 下拉树（TreeCombo）是一种组合控件，它将传统的下拉框与树形结构结合在一起，提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用，例如在需要用户选择分类或者层级结构的场景中...