各种布局

Fit布局

在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, 
    }); 
}); 

 

 

 

 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() 
    }); 

 

 

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() 
    }); 

 

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() 
    }); 

 

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%'     
        }] 
    });