ExtJS ViewPort的使用

来源：互联网发布：工艺流程方框图软件编辑：程序博客网时间：2024/04/30 18:19

ViewPort代表浏览器窗口的整个显示区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸，在一个页面中只允许出现一个ViewPort实例，此外它没有提供对滚动条的支持，如果需要使用滚动条，那么应该在其子面板中进行设置。

ViewPort静态效果显示

//静态效果显示Ext.onReady(function(){Ext.create('Ext.container.Viewport',{layout:'border',//表格布局items:[{title:'North Panle',html:'上边',region:'north',//指定子面板所在区域为northheight:100,collapsible:true  //是不是可以折叠  },{title:'West Panle',html:'左边',region:'west',//指定子面板所在区域为westwidth:100,collapsible:true  //是不是可以折叠  },{title:'Main Content',html:'中间',region:'center',//指定子面板所在区域为centercollapsible:true  //是不是可以折叠  },{title:'East Content',html:'右边',region:'east',//指定子面板所在区域为centerwidth:100,collapsible:true  //是不是可以折叠  },{title:'Bottom Panle',html:'下边',height:100,region:'south',//指定子面板所在区域为southcollapsible:true  //是不是可以折叠  }]});});

一般情况下我们使用左侧菜单，动态的更新中间区域需要显示的页面或信息。下面的例子我们将介绍如何实现。

ViewPort静态效果显示案例，我们将页面分成了五个部分，为了实现左侧菜单动态更新中间显示的效果。左侧区域我们使用TreePanel，中间区域我们使用TabPanel。创建的过程如下：

创建TabPanel

//创建TabPanelvar tabPanel = Ext.create('Ext.TabPanel',{title:'Main Content',region:'center',activeTab:0,collapsible:true, //是否可以折叠 //html:'Main Content02',});

创建TreePanel，并为其添加点击监听。

//创建TreePanelvar treePanel = Ext.create('Ext.tree.TreePanel',{title:'West Panle',//html:'左边',region:'west',//指定子面板所在区域为westwidth:150,collapsible:true,  //是否可以折叠   autoScroll:true,//自动滚动条animate:true,//动画效果rootVisible:true,//根节点是否可见lines:true,//节点之间使用横竖线连接root:{text:'网址管理',id:'root',children:[{text:'百度地址',id:'http://www.baidu.com',leaf:false,children:[{text:'百度新闻',id:'http://news.baidu.com',leaf:true}]},{text:'新浪地址',id:'http://www.sina.com.cn',leaf:true}]},listeners:{"itemclick":function(v,r,item){var n = tabPanel.getComponent(r.raw.id);if(!r.raw.leaf){ //非叶子节点，不进行操作return; }        if(!n){        n = tabPanel.add({        'id' : r.raw.id,                      'title' : r.raw.text,                       closable : true, // 通过html载入目标页                       html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+r.raw.id+'"></iframe>'        });        }        tabPanel.setActiveTab(n);}}});

原始的ViewPort静态效果显示代码，更改为如下:

左侧菜单动态添加中间显示内容

//Sample-020 左侧菜单动态添加中间显示内容Ext.onReady(function(){//创建TabPanelvar tabPanel = Ext.create('Ext.TabPanel',{title:'Main Content',region:'center',activeTab:0,collapsible:true, //是否可以折叠 //html:'Main Content02',});//创建TreePanelvar treePanel = Ext.create('Ext.tree.TreePanel',{title:'West Panle',//html:'左边',region:'west',//指定子面板所在区域为westwidth:150,collapsible:true,  //是否可以折叠   autoScroll:true,//自动滚动条animate:true,//动画效果rootVisible:true,//根节点是否可见lines:true,//节点之间使用横竖线连接root:{text:'网址管理',id:'root',children:[{text:'百度地址',id:'http://www.baidu.com',leaf:false,children:[{text:'百度新闻',id:'http://news.baidu.com',leaf:true}]},{text:'新浪地址',id:'http://www.sina.com.cn',leaf:true}]},listeners:{"itemclick":function(v,r,item){var n = tabPanel.getComponent(r.raw.id);if(!r.raw.leaf){ //非叶子节点，不进行操作return; }        if(!n){        n = tabPanel.add({        'id' : r.raw.id,                      'title' : r.raw.text,                       closable : true, // 通过html载入目标页                       html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+r.raw.id+'"></iframe>'        });        }        tabPanel.setActiveTab(n);}}});Ext.create('Ext.container.Viewport',{layout:'border',//表格布局items:[{title:'North Panle',html:'上边',region:'north',//指定子面板所在区域为northheight:100,collapsible:true  //是否可以折叠   },treePanel,tabPanel,{title:'East Content',html:'右边',region:'east',//指定子面板所在区域为centerwidth:100,collapsible:true  //是否可以折叠   },{title:'Bottom Panle',html:'下边',height:100,region:'south',//指定子面板所在区域为southcollapsible:true  //是否可以折叠   }]});});

1 0