本篇開始搭建一個ExtJS 4.2單頁面應用， 這里先介紹主頁的搭建，內容包括：主頁結構說明、擴展功能等方面。
目錄
1. 主頁結構說明
2. 擴展功能
3. 在線演示
1. 主頁結構說明
1.1 主頁布局
傳統的ExtJS 4.2應用，基本布局如下：
1.2 主頁布局分析
根據上面的主頁布局圖，可轉換具體試圖結構：
header：存放系統的名稱、logo、用戶信息等內容。
menu：菜單區域，以Tree形態展現業務入口。
tab：業務區域，具體的業務都以tab頁的形式嵌入到此區域。
1.3 主頁布局代碼
從ExtJS 4開始，應用程序的入口點開始使用為 Ext.application。
此方法取代了之前的Ext.onReady()，並增加了一些新的功能：創建一個viewport組件、設定應用程序的名稱等等。
API：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.app.Application
Ext.application({
name: 'AKApp',
launch: function () {
// 設定Viewport
Ext.create('Ext.container.Viewport', {
name: 'MainFrame',
layout: 'border',
items: [
Ext.create('Ext.panel.Panel', { // header
width: '100%',
height: 50,
bodyBorder: false,
border: false,
region: 'north',
style: {
background: '#739b2e'
},
html: '<div id="header_content">ExtJSDemo</div>'
}),
Ext.create('Ext.tree.Panel', { // menu
title: '目錄',
id: 'app_tree',
rootVisible: false,
lines: false,
split: true,
width: '20%',
region: 'west',
root: {
expanded: true,
children: [
{
text: '業務',
expanded: true,
children: []
},
{
text: 'Demo',
expanded: true,
children: [
{ text: '創建組件', id: 'Demo.CreateCompareP', leaf: true },
{ text: '查找組件', id: 'Demo.QueryCompareP', leaf: true },
]
}
]
},
listeners: {
select: function (thisView, thisControl) {
if (thisControl.data.leaf) {
// TODO：點擊菜單，創建相關的Tab頁
}
}
}
}),
Ext.create('Ext.tab.Panel', { // tab
id: 'app_tabContainer',
region: 'center',
autoScroll: true,
defaults: {
autoScroll: true,
bodyPadding: 4,
closable: true //tab頁的關閉按鈕
}
}),
]
});
}
});
2. 擴展功能
這里說明主頁常見的2種功能：
第1種：點擊菜單，動態加載業務文件。
第2種：業務tab頁的切換，修改頁面URL的值。
2.1 點擊菜單，動態加載業務文件
說明：各業務的入口都是在ExtJS tree組件的葉子節點上，系統初次加載時只展示了主頁功能，並沒有加載任何的業務代碼。現在要求點擊菜單的節點，展示業務頁面。
步驟：點擊菜單 → 加載業務文件 → 在tab容器內展現此業務
代碼：在tree容器添加select事件
Ext.create('Ext.tree.Panel', {
title: '目錄',
root: {
expanded: true,
children: [
{
text: '業務',
expanded: true,
children: [
{ text: '船舶管理', id: 'ShipMgr.ShipMgrP', leaf: true },
]
}
]
,
listeners: {
select: function (thisView, thisControl) {
if (thisControl.data.leaf) {
var tabId = thisControl.data.id;
// 1.設置tab頁的默認參數
var tabConfig = {
closable: true,
title: thisControl.data.text,
id: tabId,
bodyBorder: false,
border: false,
icon: 'tab.png'
};
// 2.判斷是否已存在此Tab，若存在就顯示
var newTab = Ext.getCmp('app_tabContainer').getComponent(tabId);
if (!newTab) {
// 2.1 加載業務文件
var tabPath = 'app.' + tabId; // 界面路徑 eg：app.ShipMgr.ShipMgrP
Ext.syncRequire(tabPath, function () {
newTab = Ext.create(tabId, tabConfig);
Ext.getCmp('app_tabContainer').add(newTab);
Ext.getCmp('app_tabContainer').setActiveTab(newTab);
});
} else {
// 2.2 已存在此業務的tab頁就直接設置active
Ext.getCmp('app_tabContainer').setActiveTab(newTab);
}
}
}
}
})
2.2 業務tab頁的切換，修改頁面URL的值
說明：此功能主要用於根據URL直接訪問具體的業務額，當然訪問之前最好還要做下權限判斷。
步驟：新建或切換tab頁 → 選中菜單的節點 → 修改頁面URL
代碼：在tab容器添加tabchange事件
Ext.create('Ext.tab.Panel', {
id: 'app_tabContainer',
region: 'center',
autoScroll: true,
listeners: {
tabchange: function (thisControl, newCard, oldCard) {
var tabId = newCard.id;
// 1.選中菜單的節點
var node = Ext.getCmp('app_tree').store.getNodeById(tabId);
if (node) {
Ext.getCmp('app_tree').getSelectionModel().select(node);
} else {
Ext.getCmp('app_tree').getSelectionModel().select(0);
}
// 2.修改url
if (oldCard) {
history.pushState('', '', location.href.split('#')[0] + '#' + newCard.id);
}
}
}
}),
3. 在線演示
在線演示：http://www.akmsg.com/ExtJS/index.html