- 浏览: 13395 次
文章分类
最新评论
面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上。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() });
相关推荐
ExtJs2.02官方实例aspx(.net)版
4. **EXTJS Store与.NET Data Access**:EXTJS的Store负责管理数据请求和缓存,它可以与.NET的数据访问层(如ADO.NET、Entity Framework)进行对接,进行数据的增删查改操作。 5. **EXTJS Grid与.NET GridView**:...
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 + ASP.NET MVC Demo是一个结合了前端ExtJS4框架和后端ASP.NET MVC架构的应用示例,展示了如何在Web开发中实现数据操作的增删改查功能,并且利用了ExtJS4的MVC模式来提高代码的组织性和可维护性。这个Demo还...
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就可以看到效果了
4. **ExtJS**:ExtJS是一个用于构建富客户端Web应用程序的JavaScript库,基于Sencha公司开发。它提供了一套完整的组件模型、数据绑定和强大的图表功能,常用于企业级应用开发。 5. **Groovy**:Groovy是Java平台上...
ExtJS + ASP.NET 后台管理框架是一种高效且灵活的开发模式,用于构建企业级的Web应用程序,尤其适合后台管理系统。这个框架结合了JavaScript库ExtJS的前端交互性和ASP.NET的强大后端处理能力,提供了丰富的用户界面...
4. **使用ExtJS组件**:根据需求选择和配置ExtJS的组件,如创建数据网格、表单、面板等。每个组件都有其特定的配置项和API,开发者需根据文档进行设置。 5. **与.NET后台交互**:利用AJAX技术,通过jQuery或者其他...
ExtJs的.Net安装包是一个专为.Net开发者设计的工具,旨在简化在.NET环境中集成和使用ExtJs库的过程。这个安装包的运作方式类似于ASP.NET AJAX的安装,这意味着它提供了便捷的方式来将ExtJs的丰富功能引入到.NET应用...
ExtJS UI控件是用于构建丰富、交互性强的Web应用程序的JavaScript库,它与ASP.NET 3.5结合使用,可以为开发人员提供强大的前端开发工具。在ASP.NET 3.5框架下,ExtJS控件能帮助开发出具有桌面应用般体验的网页应用。...
在"extjs在ASP.NET MVC4的使用"这个主题中,我们主要关注的是如何在MVC4项目中集成和利用ExtJS的功能。以下是一些关键知识点: 1. **创建ASP.NET MVC4项目**:首先,我们需要创建一个新的ASP.NET MVC4项目。在...
本例采用ASP.NET MVC3 +EXTJS4 MVC 框架,完美实现了EXTJS4动态加载JS文件,对ASP.NET MVC3及EXTJS4 MVC 各应用要点进行了应用。对于想采用ASP.NET MVC3 +EXTJS4 MVC 框架的学习者有很好的帮助,快速掌握MVC框架,本...
在样式和布局方面,EXTJS提供了灵活的布局管理器,如Fit布局、Border布局等,可以轻松地适应各种屏幕尺寸。结合ASP.NET的CSS样式控制,可以创建出响应式的设计,满足不同设备的访问需求。 总结来说,"asp.net下...
Extjs3.1.1官方实例Asp.net版,采用VS2008+Sql2005. 用到了两个数据库,其中的hotel数据库是我的《ASP.NET+Ext+JS+简单三层应用实例讲解源码.rar》资源中的数据库。
4. **数据展示与操作**:ExtJS的组件如GridPanel和FormPanel可以用于数据的展示和编辑,配合ASP.NET的数据访问层,可以实现对数据库的CRUD操作。 5. **异步操作**:使用ExtJS的Ajax和Store组件,可以实现异步加载...
ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档,详细讲诉了各种布局,并附源码与界面展示,希望能给你带来帮助
4. **查找**:EXTJS表格支持筛选和搜索功能。用户输入查询条件后,EXTJS会向控制器发送带有查询参数的请求。控制器根据这些参数查询BLL,BLL再通过DAL从数据库检索匹配的记录,返回结果后,EXTJS更新表格显示。 在...
ExtJS与.NET结合开发实例ExtJS与.NET结合开发实例