`
wangzhengji2006
  • 浏览: 23569 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Ext的layout布局

    博客分类：
  • Ext
EXTYUIJavaScriptCSSHTML 
阅读更多

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应该先指明以便正确渲染。如下列显示正常：

<div style="height:400px;"></div>


好，让我们趁热打铁，看看完整的layout是怎样的。假设ext是一子目录叫做ext-1.0，父目录下面的代码。

 

simple.html:

<html>
<head>
    <title>Simple Layout</title>
    <link rel="stylesheet" type="text/css" href="../ext-1.0/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../ext-1.0/adapter/yui/yui-utilities.js"></script>

    <script type="text/javascript" src="../ext-1.0/adapter/yui/ext-yui-adapter.js"></script>
    <script type="text/javascript" src="../ext-1.0/ext-all.js"></script>
    <script type="text/javascript" src="simple.js"></script>
</head>
<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>

</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

<html>
<head>
    <title>Simple Layout</title>
    <link rel="stylesheet" type="text/css" href="../ext-1.0/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../ext-1.0/adapter/yui/yui-utilities.js"></script>

    <script type="text/javascript" src="../ext-1.0/adapter/yui/ext-yui-adapter.js"></script>
    <script type="text/javascript" src="../ext-1.0/ext-all.js"></script>
    <script type="text/javascript" src="simple.js"></script>
</head>
<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>
</html>

 

 

 

除此之外，还可以利用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('<img src="nav-mini.gif" border="0" alt="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

<html>

<head>

    <title>Simple Layout</title>
    <link rel="stylesheet" type="text/css" href="../ext-1.0/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../ext-1.0/adapter/yui/yui-utilities.js"></script>
    <script type="text/javascript" src="../ext-1.0/adapter/yui/ext-yui-adapter.js"></script>

    <script type="text/javascript" src="../ext-1.0/ext-all-debug.js"></script>
    <script type="text/javascript" src="simple4.js"></script>
</head>
<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" scrolling="auto" style="border:0px none;"></iframe>
    </div>

</body>
</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

<html>
<head> 
    <title>Simple Layout</title> 
    <link rel="stylesheet" type="text/css" href="../ext-1.0/resources/css/ext-all.css"/> 
    <script type="text/javascript" src="../ext-1.0/adapter/yui/yui-utilities.js"></script> 
    <script type="text/javascript" src="../ext-1.0/adapter/yui/ext-yui-adapter.js"></script> 
    <script type="text/javascript" src="../ext-1.0/ext-all-debug.js"></script> 
    <script type="text/javascript" src="simple5.js"></script> 
    <style> 
        .scroll-bottom .x-btn-text { 
            background-image: url(scroll-bottom.gif); 
        } 
        .scroll-top .x-btn-text { 
            background-image: url(scroll-top.gif); 
        } 
    </style>

</head>
<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

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;
}
7
顶
0
踩
分享到：
| ext 常用类简单说明
评论
1 楼 thomas0988 2008-12-31  
哈哈哈，基哥现在是越来越牛啦！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    EXT 布局 Layout 资料

    容器组件包括一个 `layout` 及 `layoutConfig` 配置属性，用于指定容器使用的布局类型及其详细配置信息。如果未明确指定 `layout`，默认将使用 `ContainerLayout` 帺类作为布局，这种布局仅简单地将子元素放置到容器...

    ext2.0 layout布局(使用viewport)

    ext2.0 layout布局(使用viewport),将其部署到php服务器上，可以查看效果：适合一般的应该工作界面，有滑动菜单和树形菜单等，初步实现了一个不错的应用视图框架

    ExtJs4 layout 布局

    ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档，详细讲诉了各种布局，并附源码与界面展示，希望能给你带来帮助

    ext布局layout各组件动态生成并相互交互

    发现目前网上 ext　layout 例子虽然各项功能可以实现但是无法应用到真实项目中　因为大部分例子其中的各组件是静态写成的　只是动态的通过对象名调用　实际开发中各组件多为动态生成　因为即时数据：不能定义对象名...

    ext布局layout各组件动态生成并相互交互2

    发现目前网上 ext　layout 例子虽然各项功能可以实现但是无法应用到真实项目中　因为大部分例子其中的各组件是静态写成的　只是动态的通过对象名调用　实际开发中各组件多为动态生成　因为即时数据：不能定义对象名...

    Ext table布局实例 formpanel的table布局

    Ext的formpanel table布局实例，有效解决了页面resize时列宽不跟随改变的问题，即列宽的自适应宽度

    Ext介绍以及_ext页面布局

    layout: "border", // 使用Border布局 items: [northPanel] // 添加到布局中 }); ``` 这个例子中，`northPanel`被添加到了北部区域。你可以根据需要添加更多的面板到其他区域，如`west`、`east`、`south`和`center...

    ext布局(Layout.html)例子.pdf

    【EXT布局(Layout.html)详解】 EXT布局是一种强大的前端开发框架，用于构建富互联网应用程序（RIA）。在EXT中，布局管理器是核心组件之一，它负责处理容器中的子组件的排列和大小调整。以下是对EXT布局中几种常见...

    Ext常用布局

    Fit布局的类为`Ext.layout.FitLayout`，它有两个子类：`AccordionLayout`和`CardLayout`。`AccordionLayout`用于折叠面板布局，而`CardLayout`则用于在一个区域内展示一组卡片，每次只显示一张。设置Fit布局非常简单...

    EXT制作的布局，使用border layout, 稍做改动即可添加到自己的项目里， 简单实用。让你感受EXT的强大

    要创建一个使用Border Layout的EXT应用，首先需要创建一个容器，并设置其layout属性为'border'。然后，向该容器添加子组件，每个子组件需指定其所在的区域。例如： ```javascript Ext.application({ name: 'MyApp'...

    ext布局(Layout.html)例子[参考].pdf

    在EXT中，布局（Layout）负责决定组件如何在容器中排列和填充空间。以下将详细介绍EXT布局中的几种主要类型及其应用场景。 1. **Column布局**：此布局将容器划分为多列，每列的宽度可以通过`columnWidth`指定为百分...

    ext4文件系统的硬盘布局(英语版)

    总结来说，ext4文件系统在磁盘上的布局结构是非常复杂的，它涵盖了多个重要组成部分，如超级块、块组描述符、位图、inode表、目录项、扩展属性、多点挂载保护以及日志机制等。这些组成部分共同保证了文件系统的稳定...

    Ext10种布局

    - **定义**：`Ext.layout.ContainerLayout` 是 ExtJS 的基础布局类，其他所有布局都基于此基类进行扩展。 - **作用**：当没有为容器指定任何布局时，默认采用 `ContainerLayout`。该布局简单地将所有子元素按顺序...

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

    GWT-ext 布局示例

    通过实现 `com.gwtext.client.widgets.layout.HorizontalLayout` 类，可以设置Panel的布局为水平布局。每个子组件会按照添加到父容器的顺序从左到右显示，如代码清单1所示。这将创建出如图1所示的布局。 2. **垂直...

    Ext布局类的介绍与使用

    EXT框架提供了一套强大的布局管理机制，使得开发者能够轻松创建复杂且响应式的用户界面。本文将深入探讨EXT中的两种主要布局类：BorderLayout和NestedLayoutPanel，并详细介绍它们的使用方法。 首先，BorderLayout...

    Ext-window属性

    在支持一次仅显示一个子组件的布局中，如`Ext.layout.Accordion`、`Ext.layout.CardLayout`和`Ext.layout.FitLayout`，这个属性特别有用。 2. **allowDomMove**: 默认值为`true`，表示在组件渲染过程中允许移动DOM...

    Ext.Viewport布局

    布局属性与配置 在示例代码中，`Ext.Viewport`配置了一些关键属性： - **`enableTabScroll`:** 设置为`true`时，如果`TabPanel`中的标签数量超出屏幕宽度，将自动启用滚动功能。 - **`layout`:** 设置为`'border'...

    ext基础布局示例

    刚接触ext 自己做的一些布局方面的例子与大家分享 虽然很简单 希望对大家有帮助

Magicbox
Global site tag (gtag.js) - Google Analytics