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

2022-05-23 21:31:52 阅读：172 来源： 互联网

标签：function Web obj xtype Ext var PHP data Extjs

第二章前端编码-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%;
}

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

标签：function,Web,obj,xtype,Ext,var,PHP,data,Extjs
来源： https://www.cnblogs.com/yanshixin/p/16303418.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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