暈啊，今天不順啊，白天畢設因為一個小問題耽誤了很長時間，剛寫了一半了突然瀏覽器又卡死，打開后又待重新寫。。。。。。
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，到時候學到的就遠遠夠用了）。
來張效果圖：
