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