bestlong 怕失憶論壇

標題: ExtJS 之 Ext.Viewport [打印本頁]
作者: bestlong    時間: 2011-6-16 18:07     標題: ExtJS 之 Ext.Viewport

使用 ExtJS 3 語法

BorderLayout 邊框佈局
在 IE8 的畫面
extjs3-viewport-ie8.png
在 Firefox4 的畫面
extjs3-viewport-ff4.png
在 Chrome 的畫面
extjs3-viewport-chrome.png

檔案 index.html 的內容
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>ExtJS 3 : Viewport</title>
  5. <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
  6. <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
  7. <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
  8. <script type="text/javascript">
  9. Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
  10. </script>
  11. <script type="text/javascript" src="vp.js"></script>
  12. </head>
  13. <body>
  14. </body>
  15. </html>
複製代碼
檔案 vp.js 的內容
  1. Ext.onReady(function(){
  2.         var viewport = new Ext.Viewport({
  3.                 layout: 'border',
  4.                 items: [{
  5.                         id: 'north-panel',
  6.                         region: 'north',
  7.                         html: '北'
  8.                 },{
  9.                         id: 'south-panel',
  10.                         region: 'south',
  11.                         html: '南'
  12.                 }, {
  13.                         id: 'west-panel',
  14.                         region: 'west',
  15.                         html: '西',
  16.                         width: 100
  17.                 }, {
  18.                         id: 'east-panel',
  19.                         region: 'east',
  20.                         html: '東',
  21.                         width: 100
  22.                 }, {
  23.                         id: 'center-panel',
  24.                         region: 'center',
  25.                         html: '中'
  26.                 }]
  27.         });
  28. });
複製代碼
使用 BorderLayout 後整個佈局區域區分了東、西、南、北、中共五個部分，而其中的中間區域為必要之外，其他的區域都可以省略不用。而在 west 與 esat 設定寬度(width)是因為在 IE 不會顯示，需要設定寬度才會看到。

圖片附件: extjs3-viewport-ie8.png (2011-6-16 18:11, 43.74 KB) / 下載次數 725
http://www.bestlong.idv.tw/forum.php?mod=attachment&aid=MjY2fDAyYWI0ZWU3fDE3NjQ1ODA0OTd8MA%3D%3D



圖片附件: extjs3-viewport-ff4.png (2011-6-16 18:11, 36.25 KB) / 下載次數 721
http://www.bestlong.idv.tw/forum.php?mod=attachment&aid=MjY3fDRjMWQ0ZTVifDE3NjQ1ODA0OTd8MA%3D%3D



圖片附件: extjs3-viewport-chrome.png (2011-6-16 18:11, 22.5 KB) / 下載次數 728
http://www.bestlong.idv.tw/forum.php?mod=attachment&aid=MjY4fDFhNzgzZDlkfDE3NjQ1ODA0OTd8MA%3D%3D





歡迎光臨 bestlong 怕失憶論壇 (http://www.bestlong.idv.tw/) Powered by Discuz! X1.5