学习EXT第八天:EXT的布局(Layout)Part 1

教程:EXT的布局(Layout)Part 1

本文是区域管理器(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,各区域之间使用得了分隔条分割开。

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

这是一个非常基本的layout,只是分配了东南西北中间的区域、分隔条、设置一下初始尺寸,并最迟定义中间区域。本例中,BorderLayout被绑定到"document.body"这个DOM元素,其实BorderLayout还可以绑定到任何一个封闭的DOM元素。定义好BorderLayout之后,我们加入ContentPanel对象(基于本例)。

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

当前的例子是将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:



    
    
    

    
    
    


    
 
 
 
 
 

simple.js:

Simple = 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



    
    
    

    
    
    


    
 
 
 
 
This is some content that will display in a panel when a ContentPanel object is attached to the div.

 

除此之外,还可以利用ContentPanel对象带有的function加载数据。可用的方法有几种,这里我们使用其中两种:setContent() 与 setUrl()。setContent()允许您直接从JavaScipt程序中插入HTML。setUrl(),允许您从服务端得到数据加入ContentPanel中。

我们原来的例子中,ContentPanel对象创建的时候是匿名的(anonymous)。这没问题,但要引用它们,你需要遍历区域管理器所分配的对象以获得引用的对象。这不是最好的办法,所有我的做法是分配一个变量给ContentPanel然后便可直接引用。

simple3.js

Simple = 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('Mini Layout Image');
            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




    
    
    
    

    
    


    
 
 
 
 

simple4.js

Simple = 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


 
     
     
     
     
     
     
    


 
    
 
 
 
 
 

simple5.js

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

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: 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程序的有效方法。

http://www.ajaxjs.com/article.asp?id=20076721
posted @ 2007-11-12 23:48  海浪~~  阅读(2529)  评论(0编辑  收藏  举报