- 註冊時間
- 2006-3-13
- 最後登錄
- 2024-8-25
- 在線時間
- 673 小時
- 閱讀權限
- 200
- 積分
- 417
- 帖子
- 1107
- 精華
- 0
- UID
- 2
|
使用 ExtJS 3 語法
BorderLayout 邊框佈局
在 IE8 的畫面
在 Firefox4 的畫面
在 Chrome 的畫面
檔案 index.html 的內容- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>ExtJS 3 : Viewport</title>
- <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
- <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
- <script type="text/javascript">
- Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
- </script>
- <script type="text/javascript" src="vp.js"></script>
- </head>
- <body>
- </body>
- </html>
複製代碼 檔案 vp.js 的內容- Ext.onReady(function(){
- var viewport = new Ext.Viewport({
- layout: 'border',
- items: [{
- id: 'north-panel',
- region: 'north',
- html: '北'
- },{
- id: 'south-panel',
- region: 'south',
- html: '南'
- }, {
- id: 'west-panel',
- region: 'west',
- html: '西',
- width: 100
- }, {
- id: 'east-panel',
- region: 'east',
- html: '東',
- width: 100
- }, {
- id: 'center-panel',
- region: 'center',
- html: '中'
- }]
- });
- });
複製代碼 使用 BorderLayout 後整個佈局區域區分了東、西、南、北、中共五個部分,而其中的中間區域為必要之外,其他的區域都可以省略不用。而在 west 與 esat 設定寬度(width)是因為在 IE 不會顯示,需要設定寬度才會看到。 |
|