`
wangzhengji2006
  • 浏览: 23157 次
  • 性别: 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 资料

    EXT 布局 Layout 资料EXT 布局 Layout 资料EXT 布局 Layout 资料EXT 布局 Layout 资料

    ext2.0 layout布局(使用viewport)

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

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

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

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

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

    ExtJs4 layout 布局

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

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

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

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

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

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

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

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

    首先，此文档是英文的；第二，此文件主要的内容为ext4文件系统在磁盘上的布局构成；

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

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

    ext基础布局示例

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

    Ext例子及布局问题

    1. layout-test-01.html为上下布局，并且显示区采用iframe的例子。详细见代码。 2. layout-test-02.html为上下布局，并且显示区采用panel的autoload的例子。详细见代码。 3.layout-test-03.html为上下布局，并且显示...

    Ext Designer入门3-Viewport和Border布局

    本节介绍 Ext的Border布局以及如何创建一个Viewport。 1、Viewport介绍： ...layout属性是决定容器内部组件的排列布局的一个属性。而Border属性是将内部的组件划分为 东南西北中五个区域。 。。。。 具体请看教程。

    GWT-ext 布局示例

    本文是 GWT-Ext 体验之旅系列 的第 3 部分，我们将体验各种布局管理器的效果，了解我们常用的布局管理器的编程方式和一些经验总结。在对树的介绍中，我们将从树的同步和异步方式的初始化到树的 一些特性进行详细介绍...

    EXT 布局 tab布局 普通拖拽 异步加载的树 节点可以编辑的树

    1. layout-test-01.html为上下布局，并且显示区采用iframe的例子。详细见代码。 2. layout-test-02.html为上下布局，并且显示区采用panel的autoload的例子。详细见代码。 3.layout-test-03.html为上下布局，并且显示...

    ExtJS之布局详解

    折叠布局Ext.layout.AnchorLayout 边框布局Ext.layout.BorderLayout 卡片式布局Ext.layout.CardLayout 列布局Ext.layout.ColumnLayout 填充布局xt.layout.FitLayout 表单布局Ext.layout.FormLayout 表格布局Ext....

    ext学习文档和教程（有趣生动的ext）

    适合企业级开发，能实现复杂的Layout布局，界面效果可以和backbase媲美，而且使用纯javascript代码开发。 真正的可编辑的表格Edit Grid，支持XML和Json数据类型，直接可以迁入grid，有完整地说明文档。

    Ext Js权威指南(.zip.001

    9.4.4　盒子布局、垂直布局与水平布局：ext.layout.container.box、ext.layout.container.vbox与ext.layout.container.hbox / 442 9.4.5　为盒子模型提供调整大小的功能：ext.resizer.splitter / 445 9.4.6　手风琴...

    Ext 学习中文手册

    EXT的布局（Layout） 37 简单的例子 38 加入内容 42 开始使用Grid 51 步骤一 定义数据(Data Definition) 51 步骤二 列模型（Column Model） 52 Grid组件的简易分页 53 Grid数据 53 怎么做一个分页的Grid 54 分页栏...

    ext 资料和项目合集

    EXT-tree.rar Ext grid与树实例.rar ext2.1+struts2+spring2.5+hibernate3.2.rar ext布局layout各组件动态生成并相互交互.rar EXT登陆系统.rar

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