Extjs4快速上手三——實現主介面

原文 http://www.cnblogs.com/good-temper/archive/2013/04/12/3015843.html

暈啊，今天不順啊，白天畢設因為一個小問題耽誤了很長時間，剛寫了一半了突然瀏覽器又卡死，開啟後又待重新寫。。。。。。

1 建立項目

　　這個不多說，建立個Web project都會吧。

2 匯入Extjs檔案

　　在WebRoot下建立ext檔案夾，將下載的ext包中如下檔案拷入：

3 建立所需檔案夾及檔案

　　按照如下結構建立檔案夾及檔案：

　　綠色框住的為本次必須檔案。

4 編寫代碼

　　首先編寫index.jsp,這是Extjs的入口頁面（其實準確地說Extjs在運行過程中只存在這一個頁面，其他的都是其用js產生的組件而已，其本質是div+css），在其內部引入Extjs庫檔案和樣式檔案：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>ExtTest</title>    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />    <link rel="stylesheet" type="text/css" href="css/style.css">    <script type="text/javascript" src="ext/ext-all.js"></script>     <script type="text/javascript" src="app.js"></script>   </head></html>

　　接著是app.js，這個之前已經說過，是Extjs的開機檔案，其內容如下：

Ext.Loader.setConfig({enabled: true});        //開啟動態載入Ext.application({    name:'et',            //呵呵，就是ExtTest    autoCreateViewport: true,    appFolder:'app',    //指定根目錄    controllers:[                'Menu'　　　　　　//在這裡引入菜單，下次將詳細介紹如何?菜單載入    ]});

　　原來說過，如果不知名Viewport的話，ext將自動去載入view下的Viewport類，而該類應該繼承Ext.Viewport，並且完成主介面的建立，其內容如下：

Ext.define('et.view.Viewport',{     extend: 'Ext.Viewport',     layout: 'fit',     hideBorders: true,     requires : [         'et.view.Header',         'et.view.Menu',         'et.view.TabPanel',         'et.view.South'     ],     initComponent : function(){         var me = this;         Ext.apply(me, {                         //這裡講items加入當前類（即Viewport），其實直接配置Viewport的items效果一樣            items: [{                 id:'desk',                 layout: 'border',                 //這個是個重點，該布局實現“東西南北中”布局，具體細節可自己尋找，網上一大堆                items: [                     Ext.create('et.view.Header'),         //建立上側頭                    Ext.create('et.view.Menu'),         //建立左側菜單                    Ext.create('et.view.TabPanel'),     //建立中間panel選項卡                    Ext.create('et.view.South')         //建立下側欄                ]             }]         });         me.callParent(arguments);     } });

　　下邊是各部分的js檔案，就不一一介紹了，只要能弄明白調用以及每個內部items的嵌套關係，並且知道ext常見的布局效果，很容易就能看懂。

Header.js
Ext.define('et.view.Header', {     extend: 'Ext.panel.Panel' ,    border: false,    layout:'anchor',    region:'north',    cls: 'docs-header',    height:80,    items: [{        id:'header-top',        xtype:'box',        cls:'header',        border:false,        anchor: 'none -25',        html:'<span style="margin-left:10px;font-size:30;color:white;FONT-FAMILY:微軟雅黑">ExtTest</span>'        //html:'<h1>實訓管理系統</h1>'    },new Ext.Toolbar({        items:[                        {             //此處載入登入使用者資訊             xtype:'label',             iconCls: 'grid-add',             id:'head-lb-1',             cls:'welcome',             text:'歡迎登陸,XXX',             margin:'0 20 0 20'             },             {             xtype:'label',             id:'head-lb-3',             margin:'0 20 0 50',             cls:'welcome',             text:'當前日期：2013-03-20'             }, '->', {                 xtype:'button',                 text:'開啟首頁',                iconCls: 'grid-add',                //tooltip: '全螢幕顯示主操作視窗',                handler: function(){                }             },'-', {                xtype:'button',                 text:'登出',                iconCls: 'grid-add',                 handler: function(){                                      }             },'-'        ]}    )]}); 

Menu.js
Ext.define('et.view.Menu',{     extend: 'Ext.tree.Panel',     alias: 'widget.sxptmenu',     requires:['et.store.Menus'],     initComponent : function(){         Ext.apply(this,{             id: 'menu-panel',             title: '系統功能表',             iconCls:'icon-menu',             margins : '0 0 -1 1',             region:'west',             border : false,             enableDD : false,             split: true,             width : 212,             minSize : 130,             maxSize : 300,             rootVisible: false,             containerScroll : true,             collapsible : true,             autoScroll: false,            store:Ext.create('et.store.Menus')        });         this.callParent(arguments);     } }); 

TabPanel.js

Ext.define('et.view.TabPanel',{     extend: 'Ext.tab.Panel',     initComponent : function(){         Ext.apply(this,{             id: 'content-panel',             region: 'center',              defaults: {                autoScroll:true,                bodyPadding: 10             },             activeTab: 0,             border: false,             items: [{               id: 'HomePage',               title: '首頁',               iconCls:'home',              layout: {                type: 'hbox',                pack: 'start',                align: 'stretch'              },              items: [                  {                    xtype: 'panel',                    flex: 5,                    border: 0,                    width: 604,                    layout: {                        align: 'stretch',                        type: 'vbox'                    },                    header: false,                    title: 'p1',                    items: [                        {                            xtype: 'panel',                            flex: 1,                            layout:{                                type: 'absolute'                            },                            title: '個人資訊'                        },                        {                            xtype: 'panel',                            flex: 1,                            margin: '10 0 0 0 ',                            layout: {                                align: 'stretch',                                type: 'hbox'                            },                            header: false,                            border: 0,                            title: '分組題目資訊',                            items:[                                {                                    xtype: 'panel',                                    flex: 1,                                    margin: '0 0 0 0 ',                                    title: '分組題目資訊'                                },                                {                                    xtype: 'panel',                                    flex: 1,                                    margin: '0 0 0 10 ',                                    title: '值日表'                                }                            ]                        },                        {                            xtype: 'panel',                            flex: 1,                            margin: '10 0 0 0 ',                            title: '任務提示'                        }                    ]                },                {                    xtype: 'panel',                    flex: 2,                    margin: '0 0 0 10',                    header: false,                    border: 0,                    layout: {                        align: 'stretch',                        type: 'vbox'                    },                    title: '公告列表',                    items:[                        {                            xtype: 'panel',                            flex: 1,                            margin: '0 0 0 0',                            title: '最新公告'                        },                        {                            xtype: 'panel',                            flex: 1,                            margin: '10 0 0 0',                            title: '資料下載'                        }                    ]                }              ]            }]         });         this.callParent(arguments);     } }); 

South.js

Ext.define('et.view.South',{     extend: 'Ext.Toolbar',     initComponent : function(){         Ext.apply(this,{             id:"bottom",             //frame:true,             region:"south",             height:23,             items:['->',"著作權     Copyright  2013 電腦學院",'->']         });         this.callParent(arguments);     } }); 

4 其他

　　目前的實現非常簡單，寫的熟練的話半小時就能實現。在此已經實現了菜單，但是此次就不做詳細介紹留待下介紹。最後有源碼，可以自己研究下。這裡 推薦一下Sencha Architect，可以通過它實現Extjs效果，然後通過產生的程式碼來學習。雖然這個收費，但有30天試用期（作為非專業前端，30天每天拿出一小時 學習Extjs，到時候學到的就遠遠夠用了）。

　　來張：

　　

　　最後是源碼：http://files.cnblogs.com/good-temper/ExtTest.rar