ExtJs 中Viewport的介绍与使用

ExtJs 中Viewport的介绍与使用

 

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

举例1以下:

<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：

<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一栏操做