碼上歡樂
相關內容    簡體    繁體

ExtJs 中Viewport的介紹與使用

本文轉載自   查看原文   2017-03-13 20:18   2491    ExtJs

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


 

效果如下:

 

備注:xtype一欄操作

 
 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML中meta=“viewport”的介紹 ExtJs4.X之Viewport布局 ExtJS 使用點滴 十二 ViewPort 嵌套及TreePanel 寬度高度自適應 extJS 中 ext.data 介紹 meta中的viewport指令 Extjs4 MVC Controller中refs使用 extjs 關於grid中添加超鏈接的使用 ExtJS 4.2 介紹 ExtJs xtype類型介紹 ExtJS 4.2 組件介紹
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM