ExtJS4格局【转自MHZG.NET】

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

查看更多 下一篇