ext2.0的ViewPort

最新推荐文章于 2015-09-18 16:39:00 发布

最新推荐文章于 2015-09-18 16:39:00 发布 · 135 阅读

文章标签：

#EXT #HTML

ext 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Ext2.0的ViewPort简化布局管理。通过实例演示如何设置north、south、east、west及center五个区域，并实现拖拽调整大小、折叠等功能。

ext2.0的ViewPort

简单来说，用了ViewPort摆脱1.0先定义BorderLayout，再beginUpdate，endUpdate的麻烦，我们就问了，为什么事情不能更简单明了呢，就让我们看看用2.0解决上头的五块是个什么样子？

首先html里的东东不变。

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

剩下的就是代码了:

var viewport = new Ext.Viewport({
    layout:'border',
    items:[{
        title: 'north',     /标题
        region: 'north',     
        contentEl: 'north-div',  
        split: true,             //可改变框体大小
        border: true,         
        collapsible: true,   //可收缩
        height: 50,
        minSize: 50,
        maxSize: 120
    },{
        title: 'south',
        region: 'south',
        contentEl: 'south-div',
        split: true,
        border: true,
        collapsible: true,
        height: 50,
        minSize: 50,
        maxSize: 120
    },{
        title: 'east',
        region: 'east',
        contentEl: 'east-div',
        split: true,
        border: true,
        collapsible: true,
        width: 120,
        minSize: 120,
        maxSize: 200
    },{
        title: 'west',
        region: 'west',
        contentEl: 'west-div',
        split: true,
        border: true,
        collapsible: true,
        width: 120,
        minSize: 120,
        maxSize: 200
    },{
        title: 'center',
        region: 'center',
        contentEl: 'center-div',
        split: true,
        border: true,
        collapsible: true
    }]
});