ExtJs 中Viewport的介绍与使用

ExtJs 中Viewport的介绍与使用

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

举例1如下:

[javascript] view plaincopyprint?

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> 

<script type="text/javascript">

<!--

 

    Ext.onReady(function(){

      var vport = newExt.Viewport({

       enableTabScroll:true,

        layout:"fit",//采用fit布局

        items:[

         {

          title:"面板的标题",

          html:"面板中的主体内容部分",

          bbar:[

             {text:"按钮1"},

             {text:"按钮2"}]

         }]

      });

    });

//-->

</script>

效果如下:

举例2：

[javascript] view plaincopyprint?

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.           width: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> 

<script type="text/javascript">

<!--

    Ext.onReady(function(){

      var vport = newExt.Viewport({

       enableTabScroll:true,

        layout:"border",//采用border布局

        items:[

         {

          region:"north",

          height:80,

          title:"面板的标题(上部分)",

          html:"<h1>新闻后台管理系统</h1>"

         },

         {

          region:"west",

          width:120,

          title:"面板的标题(左部分)",

          html:"<h1>连接部分</h1>"

         },

         {

          xtype:"tabpanel",//面板的类型

          region:"center",

          html:"<h1>显示操作部分</h1>",

          items:[

            {title:"新闻管理"},

            {title:"用户管理"}

          ]

         }

         ]

      });

    });

//-->

</script>

效果如下:

备注:xtype一栏操作