ExtJS 4.2 業務開發(一)首頁搭建

標籤：

本篇開始搭建一個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

　　

==================================系列文章==========================================

本篇文章：7.5  ExtJS 4.2 業務開發(一)首頁搭建

Web開發之路系列文章

 

ExtJS 4.2 業務開發(一)首頁搭建