使用Extjs和PHP快速构建Web应用系统（二）

第二章 前端编码-app flow

使用ext-gen生成的Extjs应用文件夹结构如下：

任务一：在app.js中定义全局变量和全局函数

// 全局变量
var appTitle = '应用标题';
var baseUrl = 'http://localhost/back/';
var dict = {};
var oper = {};
var smxt = null;
var toastTimeout = 3000;

其中，baseUrl为后台应用的访问地址。可以和前台应用分开部署，支持跨域访问。

// 读取LocalStorage
function getLSItem(v) {
    try {
        smxt = JSON.parse(localStorage.getItem(v));
    } catch (err) {
        smxt = null;
    }
    return smxt;
}

getLSItem用于读取一些暂存于LocalStorage中的信息。

// #region 异步调用函数，支持跨域（需要服务器支持）
function pack(obj) {
    var sm = getLSItem("abcdefg");
    obj.params = obj.params || {};
    if (sm) {
        Ext.apply(obj.params, {
            uid: sm.id,
            session: sm.session
        });
    }
    Ext.apply(obj, {
        timeout: 3600000,
        url: baseUrl + obj.url,
        xhrFields: {
            withCredentials: true
        },
        crossDomain: true,
    });
}

function hii(obj) {
    pack(obj);
    Ext.apply(obj, {
        success: function (resp) {
            var s = resp.responseText;
            if (Ext.String.startsWith(s, 'var')) {
                eval(s);
            } else if (Ext.String.startsWith(s, '<iframe')) {
                obj.fn(s);
            } else {
                var ret = Ext.decode(s);
                if (ret.success == false && ret.message == 'EXPIRED') {
                    localStorage.removeItem('abcdefg');
                    Ext.Viewport.removeAll();
                    Ext.Viewport.add([{ xtype: 'loginview' }]);
                    Ext.toast('登录凭证已过期，请重新登录', toastTimeout);
                } else {
                    obj.fn(ret);
                }
            }
        },
        failure: function (resp) {
            console.log(resp);
        }
    });
    Ext.Ajax.request(obj);
}

function hjj(form, obj) {
    pack(obj);
    Ext.apply(obj, {
        success: function (f, result) {
            f.setMasked(false);
            obj.fn(result);
        },
        failure: function (f, result) {
            f.setMasked(false);
            obj.fe(result);
        }
    });
    form.setMasked({ xtype: 'loadmask' });
    form.submit(obj);
}
// #endregion

上述三个函数包装Extjs的Ajax，用于实现和后台应用的交互。

// 转换为数据字典（single）
function sdict(a, v) {
    if (v == null || v.length <= 0)
        return '-';
    var x = Ext.Array.findBy(a, function (o) {
        return o[0] == v;
    });
    return !x ? '-' : x[1];
}

// 转换为数据字典（mutli）
function mdict(a, v) {
    if (v == null || v.length <= 0)
        return '-';
    var x = v.split(',');
    var t = '';
    Ext.Array.each(x, function (v) {
        var m = Ext.Array.findBy(a, function (o) {
            return o[0] == v;
        });
        if (m) t = t.concat(t.length > 0 ? '|' : '', m[1]);
    });
    return t;
}

// 将数组转换为Json格式
function sconv(a) {
    var ret = [];
    Ext.Array.each(a, function (v) {
        ret.push({ value: v[0], text: v[1] });
    });
    return ret;
}

// 单元格着色
function acell(v, r) {
    var x = '<span style="color:red">';
    if (v == '正常') {
        x = '<span style="color:green">';
    }
    return x + v + '</span>';
}

// 将Item追加至TabBar中
function addChildTabBar(tab, obj) {
    var i = tab.child(obj.xtype);
    if (i && i.getInitialConfig('single')) {
        tab.setActiveItem(i);
    } else {
        tab.setActiveItem(tab.add({
            xtype: obj.xtype,
            title: obj.title || obj.text,
            single: obj.single || true,
            closable: obj.closable || true
        }));
    }
}

addChildTabBar用于将子窗口加入到主TabBar中，实现多页的效果。

Ext.application({
    extend: 'xt.Application',
    name: 'xt',
    requires: [
        'Ext.Toast',
        'Ext.layout.Fit',
        'Ext.panel.Collapser',
        'Ext.data.TreeStore',
        'Ext.grid.plugin.PagingToolbar',
        'Ext.grid.plugin.ViewOptions',
        'Ext.grid.plugin.RowOperations',
        'Ext.grid.rowedit.Plugin',
        'Ext.grid.filters.Plugin',
        'Ext.grid.plugin.filterbar.FilterBar',
        'Ext.form.FieldSet',
        'Ext.field.Hidden',
        'Ext.field.InputMask',
        'Ext.field.CheckboxGroup',
        'Ext.Label'
    ]
});

最后调用Ext的application函数，开始启动Web应用进程。

任务二：修改默认应用程序入口

app.js后会接着调用application.js，修改application.js如下：

Ext.define('xt.Application', {
    extend: 'Ext.app.Application',
    name: 'xt',
    requires: ['xt.*'],

    removeSplash: function () {
        Ext.getBody().removeCls('launching');
        var elem = document.getElementById("splash");
        elem.parentNode.removeChild(elem);
    },
    launch: function () {
        this.removeSplash();
        var sm = getLSItem("abcdefg");
        if (!sm) {
            Ext.Viewport.add([{ xtype: 'loginview' }]);
        } else {
            hii({
                url: 'user/verify',
                fn: function (data) {
                    if (data.success) {
                        var sec = {};
                        Ext.apply(sec, { session: data.session });
                        Ext.copy(sec, data.user, 'id');
                        localStorage.setItem('abcdefg', Ext.encode(sec));
                        Ext.apply(oper, data.user);
                        Ext.apply(dict, data.dict);
                        Ext.Viewport.add([{ xtype: 'mainview' }]);
                    } else {
                        Ext.Viewport.add([{ xtype: 'loginview' }]);
                        Ext.toast(data.message, toastTimeout);
                    }
                }
            });
        }
    }
});

在这里会调用后台user/verify接口，判断该用户是否可以免密登录，是则直接进入mainView，否则进入loginView登录界面。

application.scss是全局级的css设置，在这里主要用于一些窗口的颜色和对齐等。

@include tabbar-ui($ui: 'xt-tabbar-1',
    $background-color:gray,
    $border-style: solid,
    $horizontal-spacing:2px);

.x-layout-box {
    justify-content: left !important;
}

.x-toolbar-body-el {
    min-height: 40px;
}

.x-panelheader.x-horizontal {
    min-height: 40px;
}

.x-tab .x-inner-el {
    padding: 0 !important;
}

.x-innerhtml {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

下一篇介绍如何实现登录窗口。