亚洲色图校园春色,亚洲深深色噜噜狠狠网站,亚洲网址在线观看

學(xué)習(xí)EXT第八天:EXT的布局（Layout）

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

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

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

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

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

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

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

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

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: {
    }
});

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

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

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

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

好，讓我們趁熱打鐵，看看完整的layout是怎樣的。假設(shè)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);

加入內(nèi)容
上面的例子做的layout,除了可移動(dòng)分割欄外，功能還不強(qiáng)大。需要加入些內(nèi)容。有幾種的辦法加入內(nèi)容。如果您直接加入內(nèi)容到DIV中（ContentPanel綁定的那個(gè)），ContentPanel對(duì)象會(huì)對(duì)div里面的內(nèi)容進(jìn)行渲染。盡管試試！我們會(huì)更改html內(nèi)容加入 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對(duì)象帶有的function加載數(shù)據(jù)。可用的方法有幾種，這里我們使用其中兩種：setContent() 與 setUrl()。setContent()允許您直接從JavaScipt程序中插入HTML。setUrl()，允許您從服務(wù)端得到數(shù)據(jù)加入ContentPanel中。

我們?cè)瓉淼睦又校珻ontentPanel對(duì)象創(chuàng)建的時(shí)候是匿名的（anonymous）。這沒問題，但要引用它們，你需要遍歷區(qū)域管理器所分配的對(duì)象以獲得引用的對(duì)象。這不是最好的辦法，所有我的做法是分配一個(gè)變量給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);

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

用IFRAME標(biāo)簽做布局可靈活地處理，我們準(zhǔn)備在DOM中直接操縱IFRAME.這里IFRAME成為面板的容器，以填入中間區(qū)域的內(nèi)容

設(shè)置一下 IFRAME的滾動(dòng)條并放到中間的頁(yè)面。.

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

當(dāng)前的進(jìn)展不錯(cuò)。大多數(shù)情況滾動(dòng)條工作起來是很好的，但留意一樣的東西， Internet Explorer 7之前的版本，如果文檔完整指明DTD的DOCTYPE標(biāo)簽，IE很可能出現(xiàn)垂直滾動(dòng)條的同時(shí)也顯示水平滾動(dòng)條。這個(gè)IE布局的一個(gè)BUG。

現(xiàn)在這是個(gè)基本的LAYOUT和幾個(gè)ContentPanel對(duì)象。接著我們加入一條工具欄（toolbar）到中間的ContentPanel對(duì)象。創(chuàng)建過程非常簡(jiǎn)單。由于主題的關(guān)系，我并不準(zhǔn)備在這里詳細(xì)介紹如何創(chuàng)建toolbat。這是簡(jiǎn)單的創(chuàng)建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的容器，我們需要加入一些代碼以創(chuàng)建toolbar，然后綁定到中間的區(qū)域。toolbar有兩個(gè)按鈕： Scroll Bottom和Scroll Top。這些按鈕會(huì)滾動(dòng)IFRAME內(nèi)容到底部或是頂部。為了盡可能兼容多瀏覽器，我們的加入一個(gè)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);

一個(gè)標(biāo)準(zhǔn)的layout已經(jīng)差不多了。區(qū)域可設(shè)置標(biāo)題，這樣可以把幾個(gè)區(qū)域區(qū)分開來，創(chuàng)建該區(qū)域面板的時(shí)候指定屬性即可。

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

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區(qū)域時(shí)，是沒有title的。當(dāng)前的HTML沒有提供對(duì)一個(gè)元素的90度的旋轉(zhuǎn)。我們只好用一張透明的圖片來實(shí)現(xiàn)，上面的文字是'Navigation',寬18p,高150p,然后90度旋轉(zhuǎn)。

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

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

教程的第二部分我們將會(huì)接觸layout manager的一些高級(jí)細(xì)節(jié)內(nèi)容，包括內(nèi)嵌layouts，可編程的展開、收縮區(qū)域，創(chuàng)建tab layout和其它一些創(chuàng)建EXTellent程序的有效方法。

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

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




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

菠蘿三國(guó)

學(xué)習(xí)EXT第八天:EXT的布局（Layout）

導(dǎo)航

常用鏈接

留言簿(4)

隨筆分類

隨筆檔案

文章分類

文章檔案

收藏夾

下載

其它

工作招聘

搜索

最新評(píng)論

閱讀排行榜

評(píng)論排行榜