ExtJS梦想之旅（五）--Viewport的使用

来源：互联网发布：淘宝助理上传宝贝很慢编辑：程序博客网时间：2024/04/30 22:55

Viewport一个表示程序可视区域的特殊容器（浏览器可视区域）。

视窗渲染在document的body标签上，并且根据浏览器可视区域的大小自动调整并且管理窗口的大小变化。一个页面上只允许存在一个viewport。所有的{@link Ext.Panel 面板}增加到viewport，通过她的items，或者通过她的子面板（子面板也都可以拥有自己的layout）的items，子面板的add方法，这种设计让内部布局的优势非常明显。

Viewport不支持滚动，所以如果子面板需要滚动支持可以使用autoScroll配置。

下面展示一个很经典的border布局的Viewport程序示例。

效果截图：

下面我们就来显示这样的一个效果：

viewport.js

Ext.onReady(function() {// Viewport会自动渲染到body上new Ext.Viewport({layout : "border",items : [ {region : "north",title : "顶部工具栏",height : 100}, {region : "west",title : "菜单",width : 100}, {region : "center",title : "主区域"} ]});// 创建一个Viewportnew Ext.Viewport({// 指定viewport的布局方式    layout: 'border',    items: [{    // 指定布局到北边        region: 'north',        html: '<h1 class="x-panel-header">页面标题栏</h1>',        // autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。        autoHeight: true,        // border: false的设定表示不要边框        border: false,        // 表示上、右、下、左的间距，也就是顺时针的间距        margins: '0 0 5 0'    }, {    // 表示渲染到左边（西边）        region: 'west',        // 指定可以收缩展开        collapsible: true,        // 标题        title: '左侧菜单栏',        // 指定组件的类型是TreePanel        xtype: 'treepanel',        // 宽度是200        width: 200,        // autoScroll: true的设定表示自动根据其中的内容要不要产生滚动条        autoScroll: true,        // split: true的设定表示该组件在与其他的组件中间间隔课拉拽        split: true,        // 树加载器        loader: new Ext.tree.TreeLoader(),        // 创建树的根节点        root: new Ext.tree.AsyncTreeNode({            expanded: true,            children: [{                text: '菜单选项一',                leaf: true            }, {                text: '菜单选项二',                leaf: true            }, {                text: '菜单选项三',                leaf: true            }]        }),        // rootVisible: false 的设定表示不显示树根节点，这是不可以收缩和展开的        rootVisible: false,        // 设定事件监听器        listeners: {        // 处理单击事件            click: function(n) {                Ext.Msg.alert('Navigation Tree Click', '你单击了: "' + n.attributes.text + '"');            }        }    }, {    // 在中间放置一个tabpanel        region: 'center',        xtype: 'tabpanel',        activeTab : 0,        items: {            title: '选项面板一',            html: 'The first tab\'s content. Others may be added dynamically'        }    }, {    // 在底部（南面）放置一面板（没有指定xtype则默认是panel）        region: 'south',        title: '简介信息',        collapsible: true,        html: 'Information goes here',        split: true,        height: 100,        minHeight: 100    }]});});

viewprt.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Ext-viewport示例</title><link href="ext-3.4.1/resources/css/ext-all.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext-3.4.1/ext-all.js"></script><script type="text/javascript" src="viewport.js"></script></head><body></body></html>