`
maxiow
  • 浏览: 13395 次
文章分类
社区版块
存档分类
最新评论

ExtJS4布局【转自MHZG.NET】

阅读更多
面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持,主要包括如下10种:
   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)版

    ExtJs2.02官方实例aspx(.net)版

    EXTJS与.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 整合项目数据库

    ExtJS4.1+MVC4+Spring.NET1.3+EF5 整合项目数据库(pdm、sql及sqlite数据库) 原文地址:http://blog.csdn.net/xz2001/article/details/8723266

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

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

    Extjs4 + Asp.net MVC Demo

    ExtJS4 + ASP.NET MVC Demo是一个结合了前端ExtJS4框架和后端ASP.NET MVC架构的应用示例,展示了如何在Web开发中实现数据操作的增删改查功能,并且利用了ExtJS4的MVC模式来提高代码的组织性和可维护性。这个Demo还...

    基于extjs4.0.7的员工管理系统

    Extjs4开发笔记(一)——准备工作 http://www.mhzg.net/a/20116/20116281100279.html Extjs4开发笔记(二)——框架的搭建 http://www.mhzg.net/a/20116/201162913210280.html 目前仅实现这两步,我在参照原作者的...

    extjs + fckeditor 的结合asp.net版

    本人agd第一次发demo比较粗糙简单 还请大家谅解 这个demo讲的是extjs +...这个demo网上有 但是是java版的 今天我把它转换成asp.net版 测试环境vs2008+xp+extjs2.2+fckeditor 2.x 大家运行Default.aspx就可以看到效果了

    TutorialsPoint Angular2 ExtJS Groovy Julia MariaDB SAS VB.Net 教程

    4. **ExtJS**:ExtJS是一个用于构建富客户端Web应用程序的JavaScript库,基于Sencha公司开发。它提供了一套完整的组件模型、数据绑定和强大的图表功能,常用于企业级应用开发。 5. **Groovy**:Groovy是Java平台上...

    Extjs+ASP.net 后台管理框架

    ExtJS + ASP.NET 后台管理框架是一种高效且灵活的开发模式,用于构建企业级的Web应用程序,尤其适合后台管理系统。这个框架结合了JavaScript库ExtJS的前端交互性和ASP.NET的强大后端处理能力,提供了丰富的用户界面...

    .net+Extjs 实例

    4. **使用ExtJS组件**:根据需求选择和配置ExtJS的组件,如创建数据网格、表单、面板等。每个组件都有其特定的配置项和API,开发者需根据文档进行设置。 5. **与.NET后台交互**:利用AJAX技术,通过jQuery或者其他...

    ExtJs的.Net安装包(类似asp.net ajax安装)

    ExtJs的.Net安装包是一个专为.Net开发者设计的工具,旨在简化在.NET环境中集成和使用ExtJs库的过程。这个安装包的运作方式类似于ASP.NET AJAX的安装,这意味着它提供了便捷的方式来将ExtJs的丰富功能引入到.NET应用...

    Extjs UI控件 for Asp.net3.5

    ExtJS UI控件是用于构建丰富、交互性强的Web应用程序的JavaScript库,它与ASP.NET 3.5结合使用,可以为开发人员提供强大的前端开发工具。在ASP.NET 3.5框架下,ExtJS控件能帮助开发出具有桌面应用般体验的网页应用。...

    extjs在ASP.NET MVC4的使用

    在"extjs在ASP.NET MVC4的使用"这个主题中,我们主要关注的是如何在MVC4项目中集成和利用ExtJS的功能。以下是一些关键知识点: 1. **创建ASP.NET MVC4项目**:首先,我们需要创建一个新的ASP.NET MVC4项目。在...

    EXTJS4 MVC+ASP.NET MVC3动态加载JS文件实例

    本例采用ASP.NET MVC3 +EXTJS4 MVC 框架,完美实现了EXTJS4动态加载JS文件,对ASP.NET MVC3及EXTJS4 MVC 各应用要点进行了应用。对于想采用ASP.NET MVC3 +EXTJS4 MVC 框架的学习者有很好的帮助,快速掌握MVC框架,本...

    asp.net下extjs完整实例

    在样式和布局方面,EXTJS提供了灵活的布局管理器,如Fit布局、Border布局等,可以轻松地适应各种屏幕尺寸。结合ASP.NET的CSS样式控制,可以创建出响应式的设计,满足不同设备的访问需求。 总结来说,"asp.net下...

    Extjs3.1.1官方实例Asp.net版

    Extjs3.1.1官方实例Asp.net版,采用VS2008+Sql2005. 用到了两个数据库,其中的hotel数据库是我的《ASP.NET+Ext+JS+简单三层应用实例讲解源码.rar》资源中的数据库。

    extjs+asp.net后台管理系统页面

    4. **数据展示与操作**:ExtJS的组件如GridPanel和FormPanel可以用于数据的展示和编辑,配合ASP.NET的数据访问层,可以实现对数据库的CRUD操作。 5. **异步操作**:使用ExtJS的Ajax和Store组件,可以实现异步加载...

    ExtJs4 layout 布局

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

    EXTJS(增删改查).net实现

    4. **查找**:EXTJS表格支持筛选和搜索功能。用户输入查询条件后,EXTJS会向控制器发送带有查询参数的请求。控制器根据这些参数查询BLL,BLL再通过DAL从数据库检索匹配的记录,返回结果后,EXTJS更新表格显示。 在...

    ExtJS与.NET结合开发实例

    ExtJS与.NET结合开发实例ExtJS与.NET结合开发实例

Global site tag (gtag.js) - Google Analytics