ExtJS4布局【转自MHZG.NET】 -

maxiow

浏览: 13401 次

最近访客更多访客>>

nan指南针

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (11)

社区版块

存档分类

ExtJS4布局【转自MHZG.NET】

ext extjs

面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。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()    
        });