ext2.0的ViewPort

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