ExtJs 中Viewport的介绍与使用

ExtJs 中Viewport的介绍与使用

 

VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body 区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。Viewport 不需要再指定renderTo，而我们也看到Viewport 确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改改。Viewport 主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport 上常用的布局有fit、border 等，当然在需要的时候其它布局也会常用。

举例1如下:

[javascript] view plain copy
 
  1. <script type="text/javascript">  
  2.   
  3. <!--  
  4.   
  5.    
  6.   
  7.     Ext.onReady(function(){  
  8.   
  9.       var vport = newExt.Viewport({  
  10.   
  11.        enableTabScroll:true,  
  12.   
  13.         layout:"fit",//采用fit布局  
  14.   
  15.         items:[  
  16.   
  17.          {  
  18.   
  19.           title:"面板的标题",  
  20.   
  21.           html:"面板中的主体内容部分",  
  22.   
  23.           bbar:[  
  24.   
  25.              {text:"按钮1"},  
  26.   
  27.              {text:"按钮2"}]  
  28.   
  29.          }]  
  30.   
  31.       });  
  32.   
  33.     });  
  34.   
  35. //-->  
  36.   
  37. </script>  


 

效果如下:

举例2：

[javascript] view plain copy
 
  1. <script type="text/javascript">  
  2.   
  3. <!--  
  4.   
  5.     Ext.onReady(function(){  
  6.   
  7.       var vport = newExt.Viewport({  
  8.   
  9.        enableTabScroll:true,  
  10.   
  11.         layout:"border",//采用border布局  
  12.   
  13.         items:[  
  14.   
  15.          {  
  16.   
  17.           region:"north",  
  18.   
  19.           height:80,  
  20.   
  21.           title:"面板的标题(上部分)",  
  22.   
  23.           html:"<h1>新闻后台管理系统</h1>"  
  24.   
  25.          },  
  26.   
  27.          {  
  28.   
  29.           region:"west",  
  30.   
  31.           120,  
  32.   
  33.           title:"面板的标题(左部分)",  
  34.   
  35.           html:"<h1>连接部分</h1>"  
  36.   
  37.          },  
  38.   
  39.          {  
  40.   
  41.           xtype:"tabpanel",//面板的类型  
  42.   
  43.           region:"center",  
  44.   
  45.           html:"<h1>显示操作部分</h1>",  
  46.   
  47.           items:[  
  48.   
  49.             {title:"新闻管理"},  
  50.   
  51.             {title:"用户管理"}  
  52.   
  53.           ]  
  54.   
  55.          }  
  56.   
  57.          ]  
  58.   
  59.       });  
  60.   
  61.     });  
  62.   
  63. //-->  
  64.   
  65. </script>  


 

效果如下:

备注:xtype一栏操作

 
 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/mannixiang/p/6544822.html