ExtJs4 筆記（9） Ext.Panel 面板控制項、 Ext.window.Window 視窗控制項、 Ext.container.Viewport 布局控制項

《回到系列目錄

本篇講解三個容器類控制項。

一、面板控制項 Ext.Panel

一個面板控制項包括幾個部分，有標題列、工具列、本文、按鈕區。標題列位於最上面，工具列可以在四個位置放置，圍繞中間部分本文，按鈕區位於最小方。下面介紹幾個基本配置項：

1.title:設定面板標題文本。

2.tbar,lbar,rbar,bbar:分別設定上、左、右、下四個部位的工具列。

3.html，items:前者用來設定本文部分的html，後者設定本文部分的ext控制項。

4.buttons:設定按鈕區的按鈕。

下面看看面板產生代碼：

[html]

    <h1>Panel</h1>    <div id="div1" class="content">    </div>

[Js]

Ext.onReady(function () {    var p = Ext.create('Ext.Panel', {        title: '面板標題',        collapsible: true,        renderTo: 'div1',        width: 400,        height: 300,        autoScroll: false,        bodyBorder: true,        buttonAlign: 'right',        buttons: [{            text: "按鈕1",            handler: function () {                Ext.Msg.alert("提示", "第一個事件");            },            id: "bt1"        }, {            text: "按鈕2",            id: "bt2"        }        ],        floating: true,        footerCfg: { tag: 'span', id: 'span1', html: '面板底部' },        items: [{            xtype: "button",            text: "按鈕"        }],        tbar: Ext.create('Ext.toolbar.Toolbar', { items: ["工具列"] }),        html: "<b>本文</b>"    });    p.setPosition(40, 50);});

效果如下：

二、視窗控制項 Ext.window.Window

視窗控制項與面板控制項基本類似，只不過他看起來像一個視窗，具備最大化，最小化，開啟關閉、拖動等視窗操作，下面看看視窗產生代碼：

下面看看面板產生代碼：

[html]

    <h1>視窗</h1>    <div class="content" style="height:300px">    <button id="button1">開啟視窗</button>        <div id="win1"></div>    </div>

[Js]

Ext.onReady(function () {    var window1 = Ext.create('Ext.window.Window', {        applyTo: 'win1',        layout: 'table',            //內部元素布局方式{absolute accordion anchor border card column fit form table}        width: 500,        height: 200,        closeAction: 'hide',        //視窗關閉的方式：hide/close        plain: true,        title: "視窗標題",        maximizable: true,          //是否可以最大化        minimizable: true,          //是否可以最小化        closable: false,            //是否可以關閉        modal: true,                //是否為模態視窗        resizable: false,           //是否可以改變視窗大小        items: [{            text: '按鈕',            xtype: "button"        }, {            width: 214,            minValue: 0,            maxValue: 100,            value: 50,            xtype: "slider"        }, {            xtype: "button",            text: '一個菜單',            width: "60px",            height: "15px",            menu: {                items: [                            new Ext.ColorPalette({                                listeners: {                                    select: function (cp, color) {                                        Ext.Msg.alert('顏色選擇', '你選擇了' + color + '。');                                    }                                }                            }), '-',                            { text: '功能表項目1' }, { text: '功能表項目2' }, { text: '功能表項目3' }                        ]            }        }],        buttons: [{            text: '確定',            disabled: true        }, {            text: '取消',            handler: function () {                window1.hide();            }        }]    });    Ext.fly("button1").on("click", function () {        window1.show(Ext.get("button1"));    });});

效果如下：

三、布局控制項 Ext.container.Viewport

布局控制項一般用於整個頁面的排版布局，它按四個方向分為四塊地區，和中間本文部分，四個地區都可以自動隱藏，其實這個控制項的核心功能就是用到了“border”方式的布局，下面看看產生代碼：

[Js]

Ext.onReady(function () {    Ext.create('Ext.container.Viewport', {        layout: 'border',        items: [{            region: 'north',            html: '<h1>這裡放置logo</h1>',            xtype: "panel",            title: "標題",            autoHeight: true,            border: false,            margins: '0 0 5 0'        }, {            region: 'west',            collapsible: true,            title: '左側導航',            xtype: 'panel',            width: 200,            autoScroll: true        }, {            region: 'center',            xtype: 'tabpanel',            activeItem: 0,            items: {                title: '首頁',                html: '這裡是首頁本文內容'            }        }, {            region: 'south',            title: '底部',            collapsible: true,          //允許摺疊            html: '這裡放置著作權資訊',            split: true,            height: 100,            minHeight: 100        }]    });});

效果如下：

作者：李盼（Lipan）
出處：[Lipan] （http://www.cnblogs.com/lipan/）
著作權聲明：本文的著作權歸作者與部落格園共有。轉載時須註明本文的詳細連結，否則作者將保留追究其法律責任。