亚洲а∨天堂久久精品9966,亚洲AV无码一区二区乱子伦,亚洲中文字幕乱码AV波多JI

學習EXT第八天:EXT的布局（Layout）

Summary: 本文是區域管理器（region manager）的教程的第一篇，為您介紹如何創建區域，如何增加版面到這些區域。

Author:Dave Fenwick
Published: May 01, 2007
Translater: Frank Cheung

Ext的layout布局對于建立WEB程序尤為有用。關于布局引擎（layout engine），區域管理器（region manager）的教程將分為幾部分，本文是第一篇，為您介紹如何創建區域，如何增加版面到這些區域。

布局引擎(layout engine)這一功能早已在EXT前個ALPHA實現了。 Jack Slocum對于怎樣環繞某一區域，給與指定區域管理的策略，和建立界面的問題，在他的第一、第二篇關于跨瀏覽器的WEB2.0布局功能的博客中，進行過討論。定義一個DOM元素的邊界（edge），使之一個布局的邊框（border）－－這種做法使得創建“加厚型(thick－like)”客戶端UI的開發更進一大步。

布局管理器(layout manager)負責管理這些區域。布局管理的主要的用戶組件是BorderLayout類。該類為EXT開發富界面的程序提供了一個切入點。Layout的含意是劃分好一些預定的區域。可用的區域分別有south, east, west, north,和center。每一個BorderLayout對象都提供這些區域但只有center要求必須使用的。如果你在單獨一個區域中包含多個面板，你可通過NestedLayoutPanel 類套嵌到BorderLayout 實例中。

注意事項：本教程的每個文件都是.html和.js格式的。教程每一步都有演示,你也可以下載這些文件在編輯器（zip格式提供在這里）中看看發生什么事。

面板（Pane）是區域管理（region management）的另外一個組件。面板提供了這么一個地方，可為您的EXT器件（widget）、加載的HTML,嵌入的IFrames、或者是你日常在HTML頁面上擺放的隨便一樣東西。NestedLayoutPanel也是一個面板，只不過用于鏈接多個BorderLayout的區域，其它的面板包括內容面板 ContentPanel,GRID面板 GridPanel,和樹狀面板 TreePanel。

簡單的例子
下面的layout包含 north, south, east, west,和center的區域，而且每個區域包含一個ContentPanel，各區域之間使用得了分隔條分割開。

Titlevar mainLayout = new Ext.BorderLayout(document.body,
{
    north: {
        split: true, initialSize: 50
    },
    south: {
        split: true, initialSize: 50
    },
    east: {
        split: true, initialSize: 100
    },
    west: {
        split: true, initialSize: 100
    },
    center: {
    }
});

這是一個非常基本的layout,只是分配了東南西北中間的區域、分隔條、設置一下初始尺寸，并最遲定義中間區域。本例中，BorderLayout被綁定到"document.body"這個DOM元素，其實BorderLayout還可以綁定到任何一個封閉的DOM元素。定義好BorderLayout之后，我們加入ContentPanel對象（基于本例）。

TitlemainLayout.beginUpdate();
mainLayout.add('north', new Ext.ContentPanel('north-div', {
    fitToFrame: true, closable: false
}));
mainLayout.add('south', new Ext.ContentPanel('south-div', {
    fitToFrame: true, closable: false
}));
mainLayout.add('east', new Ext.ContentPanel('east-div', {
    fitToFrame: true, closable: false
}));
mainLayout.add('west', new Ext.ContentPanel('west-div', {
    fitToFrame: true, closable: false
}));
mainLayout.add('center', new Ext.ContentPanel('center-div', {
    fitToFrame: true
}));
mainLayout.endUpdate();

當前的例子是將ContentPanel加入到所有區域中。由調用mainLayout.beginUpdate()開始。beginUpdate()告訴BorderLayout對象在執行endUpate()方法之前，先不要對加入的對象排版布局。這樣的好處是避免了ContentPanel有對象加入時，導致UI的刷新，改進了整體的用戶體驗。執行beginUpdate()之后，加入五個ContentPanel對象到區域。所有的ContentPanel對象（除中間的那個外），都設置是可關閉的（closbale）。所有的ContentPanel對象也都設置為自動適配它們的父元素。最后執行endUpdate()渲染layout。

InternetExploer注意事項：BorderLayout所容納的元素必須有一個SIZE以便正確渲染。典型地你無須為document.body 指明size，因為document.body通常是有size的了（大多數情況，－如果你在瀏覽器上什么也看不到）。但是如果你將layout連同容器放到現有的web頁面上（‘可能是DIV）,那么DIV的size應該先指明以便正確渲染。如下列顯示正常：

好，讓我們趁熱打鐵，看看完整的layout是怎樣的。假設ext是一子目錄叫做ext-1.0，父目錄下面的代碼。

simple.html:

Title<body>
    <div id="north-div"></div>
    <div id="south-div"></div>
    <div id="east-div"></div>
    <div id="west-div"></div>
    <div id="center-div"></div>
</body>

simple.js:

TitleSimple = function() {
    return {
        init : function() {
            var mainLayout = new Ext.BorderLayout(document.body, {
                north: {
                    split: true, initialSize: 50
                },
                south: {
                    split: true, initialSize: 50
                },
                east: {
                    split: true, initialSize: 100
                },
                west: {
                    split: true, initialSize: 100
                },
                center: {
                }
            });
            mainLayout.beginUpdate();
            mainLayout.add('north', new Ext.ContentPanel('north-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('south', new Ext.ContentPanel('south-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('east', new Ext.ContentPanel('east-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('west', new Ext.ContentPanel('west-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('center', new Ext.ContentPanel('center-div', {
                fitToFrame: true
            }));
            mainLayout.endUpdate();
        }
    };
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);

加入內容
上面的例子做的layout,除了可移動分割欄外，功能還不強大。需要加入些內容。有幾種的辦法加入內容。如果您直接加入內容到DIV中（ContentPanel綁定的那個），ContentPanel對象會對div里面的內容進行渲染。盡管試試！我們會更改html內容加入 center-div中。

simple2.html

Title<body>
    <div id="north-div"></div>
    <div id="south-div"></div>
    <div id="east-div"></div>
    <div id="west-div"></div>
    <div id="center-div">This is some content that will display in a panel when a ContentPanel object is attached to the div.</div>
</body>

除此之外，還可以利用ContentPanel對象帶有的function加載數據。可用的方法有幾種，這里我們使用其中兩種：setContent() 與 setUrl()。setContent()允許您直接從JavaScipt程序中插入HTML。setUrl()，允許您從服務端得到數據加入ContentPanel中。

我們原來的例子中，ContentPanel對象創建的時候是匿名的（anonymous）。這沒問題，但要引用它們，你需要遍歷區域管理器所分配的對象以獲得引用的對象。這不是最好的辦法，所有我的做法是分配一個變量給ContentPanel然后便可直接引用。

simple3.js

TitleSimple = function() {
    var northPanel, southPanel, eastPanel, westPanel, centerPanel;
    return {
        init : function() {
            var mainLayout = new Ext.BorderLayout(document.body, {
                north: {
                    split: true, initialSize: 50
                },
                south: {
                    split: true, initialSize: 50
                },
                east: {
                    split: true, initialSize: 100
                },
                west: {
                    split: true, initialSize: 100
                },
                center: {
                }
            });
            mainLayout.beginUpdate();
            mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', {
                fitToFrame: true
            }));
            mainLayout.endUpdate();
            northPanel.setContent('This panel will be used for a header');
            westPanel.setContent('');
            centerPanel.setUrl('index.html');
            centerPanel.refresh();
        }
    };
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);

我們現在從現有的頁面動態加載內容。但是這里有個問題。若果內容頁面積過大而撐破頁面的話將沒有意義了。我們提供了一些配置屬性以解決這類問題。當fitToFrame為true時，就自動配置autoScroll。內容一旦溢出就會出現滾動條。另外一個涉及InternetExploer的問題,是中間的內容的樣式沒有生效，原因是一些瀏覽器支持動態樣式而一些不直接，要較好地解決上述問題，推薦使用Iframe標簽。

用IFRAME標簽做布局可靈活地處理，我們準備在DOM中直接操縱IFRAME.這里IFRAME成為面板的容器，以填入中間區域的內容

設置一下 IFRAME的滾動條并放到中間的頁面。.

simple4.html

Title<body>
    <div id="north-div"></div>
    <div id="south-div"></div>
    <div id="east-div"></div>
    <div id="west-div"></div>
    <div id="center-div"><iframe id="center-iframe" frameborder="0" style="border:0px none;overflow:none"></iframe></div>
</body>

simple4.js

TitleSimple = function() {
    var northPanel, southPanel, eastPanel, westPanel, centerPanel;
    return {
        init : function() {
            var mainLayout = new Ext.BorderLayout(document.body, {
                north: {
                    split: true, initialSize: 50
                },
                south: {
                    split: true, initialSize: 50
                },
                east: {
                    split: true, initialSize: 100
                },
                west: {
                    split: true, initialSize: 100
                },
                center: {
                }
            });
            mainLayout.beginUpdate();
            mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', {
                fitToFrame: true, autoScroll: true, resizeEl: 'center-iframe'
            }));
            mainLayout.endUpdate();
            northPanel.setContent('This panel will be used for a header');
            Ext.get('center-iframe').dom.src = 'index.html';
        }
    };
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);

當前的進展不錯。大多數情況滾動條工作起來是很好的，但留意一樣的東西， Internet Explorer 7之前的版本，如果文檔完整指明DTD的DOCTYPE標簽，IE很可能出現垂直滾動條的同時也顯示水平滾動條。這個IE布局的一個BUG。

現在這是個基本的LAYOUT和幾個ContentPanel對象。接著我們加入一條工具欄（toolbar）到中間的ContentPanel對象。創建過程非常簡單。由于主題的關系，我并不準備在這里詳細介紹如何創建toolbat。這是簡單的創建toolbar的過程：

var simpleToolbar = new Ext.Toolbar('simple-tb');
simpleToolbar.addButton({ text: 'Scroll Bottom', cls: 'x-btn-text-icon scroll-bottom'});
simpleToolbar.addButton({ text: 'Scroll Top', cls: 'x-btn-text-icon scroll-bottom'});要加入toolbar,需要先加入HTML的容器，我們需要加入一些代碼以創建toolbar，然后綁定到中間的區域。toolbar有兩個按鈕： Scroll Bottom和Scroll Top。這些按鈕會滾動IFRAME內容到底部或是頂部。為了盡可能兼容多瀏覽器，我們的加入一個function來控制IFRAME文檔。

simple5.html

Title<html>
<body>
    <div id="north-div"></div>
    <div id="south-div"></div>
    <div id="east-div"></div>
    <div id="west-div"></div>
    <div id="center-div">
        <div id="center-tb"></div>
        <iframe id="center-iframe" frameborder="0" scrolling="auto" style="border:0px none;"></iframe>
    </div>
</body>
</html>

simple5.js

Title

function getIframeDocument(el) {
    var oIframe = Ext.get('center-iframe').dom;
    var oDoc = oIframe.contentWindow || oIframe.contentDocument;
    if(oDoc.document) {
        oDoc = oDoc.document;
    }
    return oDoc;
}

Simple = function() {
    var northPanel, southPanel, eastPanel, westPanel, centerPanel;
    return {
        init : function() {
           var simpleToolbar = new Ext.Toolbar('center-tb');
           simpleToolbar.addButton({
               text: 'Scroll Bottom', cls: 'x-btn-text-icon scroll-bottom', handler: function(o, e) {
                   var iframeDoc = getIframeDocument('center-iframe');
                   iframeDoc.body.scrollTop = iframeDoc.body.scrollHeight;
               }
           });
           simpleToolbar.addButton({
               text: 'Scroll Top', cls: 'x-btn-text-icon scroll-top', handler: function(o, e) {
                   var iframeDoc = getIframeDocument('center-iframe');
                   iframeDoc.body.scrollTop = 0;
               }
           });
           var mainLayout = new Ext.BorderLayout(document.body, {
                north: {
                    split: true, initialSize: 50
                },
                south: {
                    split: true, initialSize: 50
                },
                east: {
                    split: true, initialSize: 100
                },
                west: {
                    split: true, initialSize: 100
                },
                center: { }
            });
            mainLayout.beginUpdate();
            mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', {
                fitToFrame: true, autoScroll: true, resizeEl: 'center-iframe', toolbar: simpleToolbar
            }));
            mainLayout.endUpdate();
            northPanel.setContent('This panel will be used for a header');
            Ext.get('center-iframe').dom.src = 'index.html';
        }
    };
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);

一個標準的layout已經差不多了。區域可設置標題，這樣可以把幾個區域區分開來，創建該區域面板的時候指定屬性即可。

所有的區域都可以收縮和展開。要使一個區域可收縮，你應在區域配置項中指定collapsible屬性。屬性collapsedTitle是用于區域收縮之后顯示的文字，collapsedTitle屬性只用于north和south區域。

simple6.js

Simple = function() {
    var northPanel, southPanel, eastPanel, westPanel, centerPanel;
    return {
        init : function() {
           var simpleToolbar = new Ext.Toolbar('center-tb');
           simpleToolbar.addButton({
               text: 'Scroll Bottom', cls: 'x-btn-text-icon scroll-bottom', handler: function(o, e) {
                   var iframeDoc = getIframeDocument('center-iframe');
                   iframeDoc.body.scrollTop = iframeDoc.body.scrollHeight;
               }
           });
           simpleToolbar.addButton({
               text: 'Scroll Top', cls: 'x-btn-text-icon scroll-top', handler: function(o, e) {
                   var iframeDoc = getIframeDocument('center-iframe');
                   iframeDoc.body.scrollTop = 0;
               }
           });
           var mainLayout = new Ext.BorderLayout(document.body, {
                north: {
                    split: true, initialSize: 50
                },
                south: {
                    split: true, initialSize: 125, titlebar: true,
                    collapsedTitle: 'Status', collapsible: true
                },
                east: {
                    split: true, initialSize: 100
                },
                west: {
                    split: true, initialSize: 100, titlebar: true, collapsible: true
                },
                center: { titlebar: true}
            });
            mainLayout.beginUpdate();
            mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', {
                fitToFrame: true, closable: false, title: 'Status'
            }));
            mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', {
                fitToFrame: true, closable: false
            }));
            mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', {
                fitToFrame: true, closable: false, title: 'Navigation'
            }));
            mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', {
                fitToFrame: true, autoScroll: true, resizeEl: 'center-iframe',
                toolbar: simpleToolbar, title: 'Content'
            }));
            mainLayout.endUpdate();
            northPanel.setContent('This panel will be used for a header');
            Ext.get('center-iframe').dom.src = 'index.html';
        }
    };
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);

注意我們收藏起west區域時，是沒有title的。當前的HTML沒有提供對一個元素的90度的旋轉。我們只好用一張透明的圖片來實現，上面的文字是'Navigation',寬18p,高150p,然后90度旋轉。

為了顯示圖片，我們需要增大EXT原先的widget樣式，只須在HTML頭樣式表中加入下列樣式便可得到適合的樣式效果。如simple7.html示。

.x-layout-collapsed-west {
    background-image: url(navigation.gif);
    background-repeat: no-repeat;
    background-position: center;
}

教程的第二部分我們將會接觸layout manager的一些高級細節內容，包括內嵌layouts，可編程的展開、收縮區域，創建tab layout和其它一些創建EXTellent程序的有效方法。

posted on 2007-08-07 14:16 菠蘿閱讀(870) 評論(0) 編輯收藏所屬分類: EXT

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: EXT手冊：Manual:Core:Working with JSON (Chinese) (轉) 中文化問題(轉) 學習一下EXT 作了些筆記 Ext布局類的介紹與使用一個用ext做的登錄頁面學習EXT第一天:EXT簡介學習EXT第二天:EXT簡介（二）學習EXT第三天:EXT:Menu組件學習EXT第四天--開始使用Grid 學習EXT第五日--Grid組件的簡易分頁

菠蘿三國

學習EXT第八天:EXT的布局（Layout）

導航

常用鏈接

留言簿(4)

隨筆分類

隨筆檔案

文章分類

文章檔案

收藏夾

下載

其它

工作招聘

搜索

最新評論

閱讀排行榜

評論排行榜