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

時間 2019-12-01

標籤 extjs 4.2 業務開發主頁搭建简体版

原文原文鏈接

本篇開始搭建一個ExtJS 4.2單頁面應用，這裏先介紹主頁的搭建，內容包括：主頁結構說明、擴展功能等方面。javascript

1. 主頁結構說明

1.1 主頁佈局

傳統的ExtJS 4.2應用，基本佈局以下：web

1.2 主頁佈局分析

根據上面的主頁佈局圖，可轉換具體試圖結構：api

header：存放系統的名稱、logo、用戶信息等內容。app

menu：菜單區域，以Tree形態展示業務入口。佈局

tab：業務區域，具體的業務都以tab頁的形式嵌入到此區域。ui

1.3 主頁佈局代碼

從ExtJS 4開始，應用程序的入口點開始使用爲 Ext.application。this

此方法取代了以前的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);
            }
        }
    }
}),