ExtJs佈局詳解

序言

    1、百度百科上說：ExtJs功能豐富，無人能出其右。無論是介面之美，還是功能之強，extjs都高居榜首。

    2、呵呵，介面之美當是少不了佈局的，這篇文章我寫layout的七種佈局。（extjs是4.+版本）

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 將啟用摺疊功能。

   center 區域是必須使用的，Center區域會自動填充其他區域的剩餘空間。尤其在Extjs4.0中，當指定佈局為border時，如果沒有指定center區域時，會出現報錯資訊。 

 Ext.onReady(function () {
            new Ext.Viewport({
                title: "Viewport",
                layout: "border",
                defaults: {
                    bodyStyle: "background-color: #FFFFFF;",
                    frame: true
                },
                items: [
                            { region: "west", width:90, title: 'north', collapsible: true },
                            { region: "east", width: 90, title: 'north', collapsible: true },
                            { region: "north", height: 100, title:'north' , collapsible:true },
                            { region: "center", split: true, border: true, collapsible: true,title:'center' },
                            { region: "south", title:"south", split: true, border: true, collapsible: true, height: 100 },

                        ]
            });
        });

 

Accordion佈局__手風琴佈局

      accordion佈局：accordion佈局也稱手風琴佈局，在accordion佈局下，在任何時間裡，只有一個皮膚處於啟用狀態。其中每個面邊都支援展開和摺疊。注意：只有Ext.Panels 和所有Ext.panel.Panel 子項，才可以使用accordion佈局。

 Ext.onReady(function () {
            var accordion = Ext.create("Ext.panel.Panel", {
                title: "west",
                layout: "accordion",  //設定為手風琴佈局
                layoutConfig: {
                    animate: true
                },
                width: 250,
                minWidth: 90,
                region: "west", //設定方位
                split: true,
                collapsible: true,
                items: [
                            { title: "巢狀皮膚一", html: "巢狀皮膚一", iconCls: "save" },
                            { title: "巢狀皮膚二", html: "巢狀皮膚二", iconCls: "search" },
                            { title: "巢狀皮膚三", html: "巢狀皮膚三", iconCls: "back" },
                            { title: "巢狀皮膚四", html: "巢狀皮膚四", iconCls: "12" }
                       ]
            });

            new Ext.Viewport({
                title: "Viewport",
                layout: "border", //這裡是（border）邊界佈局
                defaults: {
                    bodyStyle: "background-color: #FFFFFF;",
                    frame: true
                },
                items: [
                             accordion, //這裡是（accordion）手風琴佈局
                            {region: "east", width: 90, title: 'north', collapsible: true },
                            { region: "north", height: 100, title: 'north', collapsible: true },
                            { region: "center", split: true, border: true, collapsible: true, title: 'center' },
                            { region: "south", title: "south", split: true, border: true, collapsible: true, height: 100 }
                        ]
            });
        });

Card佈局__類似嚮導

     Card佈局：這種佈局用來管理多個子元件，並且在任何時刻只能顯示一個子元件。這種佈局最常用的情況是嚮導模式，也就是我們所說的分佈提交。Card佈局可以使用layout:'card'來建立。

   注意：由於此佈局本身不提供分步導航功能，所以需要使用者自己開發該功能。由於只有一個皮膚處於顯示狀態，那麼在初始時，我們可以使用setActiveItem功能來指定某一個皮膚的顯示。當要顯示下一個皮膚或者上一個皮膚的時候，我們可以使用getNext()或getPrev()來得到下一個或上一個皮膚。然後使用setDisabled方法來設定皮膚的顯示。另外，如果皮膚中顯示的是FORM佈局，我們在點選下一個皮膚的時候，處理FORM中提交的元素，通過AJAX將表單中的內容儲存到資料庫中或者SESSION中。

   下面的示例程式碼展示了一個基本的Card佈局，佈局中並沒有包含form元素，具體情況，還要根據實際情況進行處理：

 //Card佈局__類似嚮導
        Ext.application({
            name: 'HelloExt',
            launch: function () {
                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: 'Card佈局示例',
                    width: 300,
                    height: 202,
                    layout: 'card',
                    activeItem: 0,
                    x: 30,
                    y: 60,
                    bodyStyle: 'padding:15px',
                    defaults: { border: false },
                    bbar: [{
                        id: 'move-prev',
                        text: '上一步',
                        handler: function (btn) {
                            navigate(btn.up("panel"), "prev");
                        },
                        disabled: true
                    },
                    '->',
                    {
                        id: 'move-next',
                        text: '下一步',
                        handler: function (btn) {
                            navigate(btn.up("panel"), "next");
                        }
                    }],
                    items: [{
                        id: 'card-0',
                        html: '<h1>第一步</h1>'
                    },
                    {
                        id: 'card-1',
                        html: '<h1>第二步</h1>'
                    },
                    {
                        id: 'card-2',
                        html: '<h1>最後一步</h1>'
                    }],
                    renderTo: Ext.getBody()
                });
            }
        });

fit 佈局

 

 在Fit佈局中，子元素將自動填滿整個父容器。

  注意：在fit佈局下，對其子元素設定寬度是無效的。如果在fit佈局中放置了多個元件，則只會顯示第一個子元素。典型的案例就是當客戶要求一個window或panel中放置一個GRID元件，grid元件的大小會隨著父容器的大小改變而改變。

        //fit 佈局
        Ext.application({
            name: 'HelloExt',
            launch: function () {
                Ext.create('Ext.container.Viewport', {
                    layout: 'fit',
                    width: '800px', //沒有做用的
                    items: [
                                {
                                    title: 'Hello Ext',
                                    html: 'Hello! Welcome to Ext JS.'
                                },
                                 {
                                     title: ' 媽咪媽咪哄 ',
                                     html: '這個子控制元件是不會顯示的，嗚哈哈哈！'
                                 }
                            ]
                });
            }
        });

Anchor佈局

  

     anchor佈局將使元件固定於父容器的某一個位置，使用anchor佈局的子元件尺寸相對於容器的尺寸，即父容器容器的大小發生變化時，使用anchor佈局的元件會根據規定的規則重新渲染位置和大小。

     AnchorLayout佈局沒有任何的直接配置選項（繼承的除外），然而在使用AnchorLayout佈局時，其子元件都有一個anchor屬性，用來配置此子元件在父容器中所處的位置。

    anchor屬性為一組字串，可以使用百分比或者是-數字來表示。配置字串使用空格隔開，例如

    anchor:'75% 25%'，表示寬度為父容器的75%，高度為父容器的25%

    anchor:'-295 -300'，表示元件相對於父容器右邊距為295，相對於父容器的底部位300

    anchor:'-250 10%'，混合模式，表示元件黨對於如容器右邊為250，高度為父容器的10%

//Anchor佈局
        Ext.application({
            name: 'HelloExt',
            launch: function () {
                Ext.create('Ext.Panel', {
                    width: 500,
                    height: 400,
                    title: "Anchor佈局",
                    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: '-295 -300'
                    }, {
                        xtype: 'panel',
                        title: 'Mixed Offset and Percent',
                        anchor: '-250 10%'
                    }]
                });
            }
        });

Absolute佈局

 

    Absolute佈局繼承Ext.layout.container.Anchor 佈局方式，並增加了X/Y配置選項對子元件進行定位，Absolute佈局的目的是為了擴充套件布局的屬性，使得佈局更容易使用。

 //Absolute佈局
        Ext.application({
            name: "HelloExt",
            launch: function () {
                Ext.create('Ext.form.Panel', {
                    title: 'Absolute佈局',
                    width: 300,
                    height: 275,
                    x: 200,
                    y: 90,
                    layout: 'absolute',
                    defaultType: 'textfield',
                    items: [{
                        x: 10,
                        y: 10,
                        xtype: 'label',
                        text: 'Send To:'
                    }, {
                        x: 80,
                        y: 10,
                        name: 'to',
                        anchor: '90%'  //控制元件從居左80px處，拉長到居左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% 80%' //控制元件從居左0px處拉長100%，空間從居上80px處，拉長至餘下控制元件高度的80%處
                    }],
                    renderTo: Ext.getBody()
                });
            }
        });

Column佈局__列布局

 

    Column佈局一般被稱為列布局，這種佈局的目的是為了建立一個多列的格式。其中每列的寬度，可以為其指定一個百分比或者是一個固定的寬度。

    Column佈局沒有直接的配置選項（繼承的除外），但Column佈局支援一個columnWidth屬性，在佈局過程中，使用columnWidth指定每個皮膚的寬度。

注意：使用Column佈局佈局時，其子皮膚的所有columnWidth值加起來必須介於0~1之間或者是所佔百分比。他們的總和應該是1。

另外，如果任何子皮膚沒有指定columnWidth值，那麼它將佔滿剩餘的空間。 

  Ext.application({
            name: "HelloExt",
            launch: function () {
                Ext.create('Ext.panel.Panel', {
                    title: '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()
                });
            }
        });