maxiow
- 浏览: 13006 次
-
文章分类
最新评论
面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种：
ContainerLayout（容器布局）
FitLayout（自适应布局）
AccordionLayout（折叠布局）
CardLayout（卡片式布局）
AnchorLayout（锚点布局）
AbsoluteLayout（绝对位置布局）
FormLayout（表单布局）
ColumnLayout（列布局）
TableLayout（表格布局）
BorderLayout（边框布局）
Extjs4布局详解(一)—Fit布局
在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在当前容器中存在多个子面板则只有第一个会被显示。典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的大小会随着父容器的大小改变而改变。
示例代码：
Extjs4布局详解(二)—border布局
border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。
注意：north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大，center区域就变小了。
参数 split:true 可以调整除了center四个区域的大小。
参数 collapsible:true 将激活折叠功能， title必须设置，因为折叠按钮是出现标题部分的。
center 区域是必须使用的，而且center 区域不允许折叠。Center区域会自动填充其他区域的剩余空间。尤其在Extjs4.0中，当指定布局为border时，没有指定center区域时，会出现报错信息。
示例代码：
Extjs4布局详解(三)—accordion布局
accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。注意：只有Ext.Panels 和所有Ext.panel.Panel 子项，才可以使用accordion布局。
示例代码：
Extjs4布局详解(四)—Card布局
Card布局：这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。Card布局可以使用layout:'card'来创建。注意：由于此布局本身不提供分步导航功能，所以需要用户自己开发该功能。由于只有一个面板处于显示状态，那么在初始时，我们可以使用setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候，我们可以使用getNext()或getPrev()来得到下一个或上一个面板。然后使用setDisabled方法来设置面板的显示。另外，如果面板中显示的是FORM布局，我们在点击下一个面板的时候，处理FORM中提交的元素，通过AJAX将表单中的内容保存到数据库中或者SESSION中。
下面的示例代码展示了一个基本的Card布局，布局中并没有包含form元素，具体情况，还要根据实际情况进行处理：
Extjs4布局详解(五)—anchor布局
anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。
AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此子组件在父容器中所处的位置。
anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开，例如
anchor:'75% 25%'，表示宽度为父容器的75%，高度为父容器的25%
anchor:'-300 -200'，表示组件相对于父容器右边距为300，相对于父容器的底部位200
anchor:'-250 20%'，混合模式，表示组件党对于如容器右边为250，高度为父容器的20%
示例代码：
Extjs4布局详解(六)—Absolute布局
Absolute布局继承Ext.layout.container.Anchor 布局方式，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用。
Absolute Layout
效果图
Extjs4布局详解(七)—Column布局
Column布局一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。
Column布局没有直接的配置选项（继承的除外），但Column布局支持一个columnWidth属性，在布局过程中，使用columnWidth指定每个面板的宽度。
注意：使用Column布局布局时，其子面板的所有columnWidth值加起来必须介于0~1之间或者是所占百分比。他们的总和应该是1。
另外，如果任何子面板没有指定columnWidth值，那么它将占满剩余的空间。
示例代码：
ContainerLayout（容器布局）
FitLayout（自适应布局）
AccordionLayout（折叠布局）
CardLayout（卡片式布局）
AnchorLayout（锚点布局）
AbsoluteLayout（绝对位置布局）
FormLayout（表单布局）
ColumnLayout（列布局）
TableLayout（表格布局）
BorderLayout（边框布局）
Extjs4布局详解(一)—Fit布局
在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在当前容器中存在多个子面板则只有第一个会被显示。典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的大小会随着父容器的大小改变而改变。
示例代码：
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData
});
Ext.define('DataWindow',{
extend : 'Ext.window.Window',
title : 'MHZG.NET---Fit布局示例代码',
width:550,
layout : 'fit',
items : {
xtype : 'gridpanel',
store: store,
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
text : 'Change',
width : 75,
sortable : true,
dataIndex: 'change'
},
{
text : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}]
}
});
Ext.onReady(function(){
var win = Ext.create("DataWindow",{
x:10,
y:20,
});
win.show();
});
Extjs4布局详解(二)—border布局
border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。
注意：north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大，center区域就变小了。
参数 split:true 可以调整除了center四个区域的大小。
参数 collapsible:true 将激活折叠功能， title必须设置，因为折叠按钮是出现标题部分的。
center 区域是必须使用的，而且center 区域不允许折叠。Center区域会自动填充其他区域的剩余空间。尤其在Extjs4.0中，当指定布局为border时，没有指定center区域时，会出现报错信息。
示例代码：
Ext.create('Ext.panel.Panel', {
width: 500,
height: 400,
title: 'MHZG.NET-Border Layout',
layout: 'border',
x:20,
y:20,
items: [{
title: 'South Region is resizable',
region: 'south',
xtype: 'panel',
height: 80,
split: true,
margins: '0 5 5 5'
},{
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true,
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center',
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0',
html:'在Extjs4中，center区域必须指定，否则会报错。'
}],
renderTo: Ext.getBody()
});
Extjs4布局详解(三)—accordion布局
accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。注意：只有Ext.Panels 和所有Ext.panel.Panel 子项，才可以使用accordion布局。
示例代码：
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 300,
x:20,
y:20,
layout:'accordion',
defaults: {
bodyStyle: 'padding:15px'
},
layoutConfig: {
titleCollapse: false,
animate: true,
activeOnTop: true
},
items: [{
title: 'Panel 1',
html: 'Panel content!'
},{
title: 'Panel 2',
html: 'Panel content!'
},{
title: 'Panel 3',
html: 'Panel content!'
}],
renderTo: Ext.getBody()
});
Extjs4布局详解(四)—Card布局
Card布局：这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。Card布局可以使用layout:'card'来创建。注意：由于此布局本身不提供分步导航功能，所以需要用户自己开发该功能。由于只有一个面板处于显示状态，那么在初始时，我们可以使用setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候，我们可以使用getNext()或getPrev()来得到下一个或上一个面板。然后使用setDisabled方法来设置面板的显示。另外，如果面板中显示的是FORM布局，我们在点击下一个面板的时候，处理FORM中提交的元素，通过AJAX将表单中的内容保存到数据库中或者SESSION中。
下面的示例代码展示了一个基本的Card布局，布局中并没有包含form元素，具体情况，还要根据实际情况进行处理：
var navigate = function(panel, direction){
var layout = panel.getLayout();
layout[direction]();
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
Ext.getCmp('move-next').setDisabled(!layout.getNext());
};
Ext.create('Ext.panel.Panel', {
title: 'MHZG.NET-Card布局示例',
width: 300,
height: 202,
layout: 'card',
activeItem: 0,
x:30,
y:60,
bodyStyle: 'padding:15px',
defaults: {border: false},
bbar: [{
id: 'move-prev',
text: 'Back',
handler: function(btn) {
navigate(btn.up("panel"), "prev");
},
disabled: true
},
'->',
{
id: 'move-next',
text: 'Next',
handler: function(btn) {
navigate(btn.up("panel"), "next");
}
}],
items: [{
id: 'card-0',
html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
},
{
id: 'card-1',
html: '<p>Step 2 of 3</p>'
},
{
id: 'card-2',
html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
}],
renderTo: Ext.getBody()
});
Extjs4布局详解(五)—anchor布局
anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。
AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此子组件在父容器中所处的位置。
anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开，例如
anchor:'75% 25%'，表示宽度为父容器的75%，高度为父容器的25%
anchor:'-300 -200'，表示组件相对于父容器右边距为300，相对于父容器的底部位200
anchor:'-250 20%'，混合模式，表示组件党对于如容器右边为250，高度为父容器的20%
示例代码：
Ext.create('Ext.Panel', {
width: 500,
height: 400,
title: "MHZG.NET-AnchorLayout Panel",
layout: 'anchor',
x:60,
y:80,
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
title: '75% Width and 25% Height',
anchor: '75% 25%'
},{
xtype: 'panel',
title: 'Offset -300 Width & -200 Height',
anchor: '-300 -200'
},{
xtype: 'panel',
title: 'Mixed Offset and Percent',
anchor: '-250 30%'
}]
});
Extjs4布局详解(六)—Absolute布局
Absolute布局继承Ext.layout.container.Anchor 布局方式，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用。
Ext.create('Ext.form.Panel', {
title: 'MHZG.NET - Absolute Layout',
width: 300,
height: 275,
x:20,
y:90,
layout:'absolute',
defaultType: 'textfield',
items: [{
x: 10,
y: 10,
xtype:'label',
text: 'Send To:'
},{
x: 80,
y: 10,
name: 'to',
anchor:'90%'
},{
x: 10,
y: 40,
xtype:'label',
text: 'Subject:'
},{
x: 80,
y: 40,
name: 'subject',
anchor: '90%'
},{
x:0,
y: 80,
xtype: 'textareafield',
name: 'msg',
anchor: '100% 100%'
}],
renderTo: Ext.getBody()
});
Absolute Layout
效果图
Extjs4布局详解(七)—Column布局
Column布局一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。
Column布局没有直接的配置选项（继承的除外），但Column布局支持一个columnWidth属性，在布局过程中，使用columnWidth指定每个面板的宽度。
注意：使用Column布局布局时，其子面板的所有columnWidth值加起来必须介于0~1之间或者是所占百分比。他们的总和应该是1。
另外，如果任何子面板没有指定columnWidth值，那么它将占满剩余的空间。
示例代码：
Ext.create('Ext.panel.Panel', {
title: 'MHZG.NET - Column Layout - 按比例',
width: 350,
height: 250,
x:20,
y:100,
layout:'column',
items: [{
title: 'Column 1',
columnWidth: .25
},{
title: 'Column 2',
columnWidth: .55
},{
title: 'Column 3',
columnWidth: .20
}],
renderTo: Ext.getBody()
});
Ext.create('Ext.Panel', {
title: 'MHZG.NET - Column Layout - 混合模式',
width: 350,
height: 250,
x:20,
y:120,
layout:'column',
items: [{
title: 'Column 1',
width: 120
},{
title: 'Column 2',
columnWidth: .7
},{
title: 'Column 3',
columnWidth: .3
}],
renderTo: Ext.getBody()
});
分享到：
发表评论
相关推荐
TutorialsPoint Angular2 AppML CoffeeScript ExtJS Groovy Julia MariaDB SAS VB.Net 教程
ExtJs2.02官方实例aspx(.net)版
ExtJS4.1+MVC4+Spring.NET1.3+EF5 整合项目数据库（pdm、sql及sqlite数据库） 原文地址：http://blog.csdn.net/xz2001/article/details/8723266
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
Extjs4开发笔记（一）——准备工作 http://www.mhzg.net/a/20116/20116281100279.html Extjs4开发笔记(二)——框架的搭建 http://www.mhzg.net/a/20116/201162913210280.html 目前仅实现这两步，我在参照原作者的...
本人agd第一次发demo比较粗糙简单 还请大家谅解 这个demo讲的是extjs +...这个demo网上有 但是是java版的 今天我把它转换成asp.net版 测试环境vs2008+xp+extjs2.2+fckeditor 2.x 大家运行Default.aspx就可以看到效果了
ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档，详细讲诉了各种布局，并附源码与界面展示，希望能给你带来帮助
本例采用ASP.NET MVC3 +EXTJS4 MVC 框架，完美实现了EXTJS4动态加载JS文件，对ASP.NET MVC3及EXTJS4 MVC 各应用要点进行了应用。对于想采用ASP.NET MVC3 +EXTJS4 MVC 框架的学习者有很好的帮助，快速掌握MVC框架，本...
Extjs3.1.1官方实例Asp.net版,采用VS2008+Sql2005. 用到了两个数据库,其中的hotel数据库是我的《ASP.NET+Ext+JS+简单三层应用实例讲解源码.rar》资源中的数据库。
ExtJS与.NET结合开发实例ExtJS与.NET结合开发实例
一款结合Extjs技术共同打造的ASP.net 网站通用后台框架，所用的extjs版本是2.2，这是一个框架模板，包括一些后台管理左侧的树形菜单，一些AJAX+xml的常用操作等。
Extjs4 MVC开发笔记源码，此源码已经将命名空间修改为Soyi,由于涉及到一些公司信息，将所有数据库中的数据清除，由于时间仓促。只有备案管理的grid是...另外，可以访问:www.mhzg.net得到更多关于extjs4的文章及帮助。
Demo演示了如何在ASP.NET MVC4上使用extjs添加控件
ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合项目用到的数据库 原文地址： http://blog.csdn.net/xz2001/article/details/8716541 注：该数据库是20130411日修改后的。
1.开发环境：VS2010 + SQL2008 2.登陆用户: admin admin 可进行二次开发 各类文档在：OA-系统文档 文件夹下 数据库在：Data文件夹下 手机版系统在：Web/Moa文件夹目录下。
Extjs & Ext.net中的一些属性
用extjs4搭的一个简单布局框架
ASP.NET+Extjs
ExtJS ASP.NET实现真实的进度条显示服务器端长时间操作
extjs 3.0中文api ext.net 中文api 不管你会extjs还是ext.net一个中文api 你必不可少的选择