bestlong 怕失憶論壇

註 冊

找回密碼

 

 

搜索
bestlong 怕失憶論壇 › 論壇 › JavaScript › ExtJS 之 Ext.Viewport
查看: 3404|回復: 0
 go

ExtJS 之 Ext.Viewport [複製鏈接]

bestlong

Rank: 9Rank: 9Rank: 9
1#
發表於 2011-6-16 18:07 |只看該作者 |倒序瀏覽 |打印
使用 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 不會顯示，需要設定寬度才會看到。
收藏0 分享0
我是雪龍
http://blog.bestlong.idv.tw
http://www.bestlong.idv.tw
回復 引用

舉報 返回頂部

‹ 上一主題|下一主題 ›
返回列表 發新帖 回復

Archiver|怕失憶論壇

GMT+8, 2024-5-9 03:52 , Processed in 0.037283 second(s), 12 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc.