初试Ext JS 6.6的NPM版(二)

栏目: 编程语言 · 发布时间: 6年前

内容简介:NPM版的Ext JS,在文件解构上与使用Cmd版的区别不大,最大的改变是样式文件(scss文件)不再要求放在sass文件夹,而是可以与视图文件放在一起,如下图所示。下面尝试把快速模版的东西迁移过来试试。先把

NPM版的Ext JS,在文件解构上与使用Cmd版的区别不大,最大的改变是样式文件(scss文件)不再要求放在sass文件夹,而是可以与视图文件放在一起,如下图所示。

初试Ext JS 6.6的NPM版(二)

下面尝试把快速模版的东西迁移过来试试。先把 app\desktop\src\view 文件夹下的文件和文件夹删除。然后将快速模版中的 app\view 中的文件复制过来。把 NavigationTree.js 文件复制到 app\desktop\src\store 文件夹,把 Base.jsUser.js 复制到 app\desktop\src\model 文件夹。把 packages\local\ 文件夹里的 Common 文件夹复制到 packages 文件夹,要注意,这里不能学快速模版那样加一层 local 文件夹,不然会找不到类。把 resources 文件夹里的内容全部复制到 resources 文件夹。

余下要做的是处理样式文件,这个麻烦点,把 sass\var 文件夹下所以文件的内容复制到 app\desktop\sass\var.scss 文件内。最后把 sass\src 文件夹下的文件复制到对应的视图所在文件夹。

最后要将 app.js 文件修改为以下内容:

Ext.application({
    extend: 'Admin.Application',
    name: 'Admin',

    requires: [
        'Common.overrides.*',
        //'Common.locale.*',
        //'Admin.locale.zh_CN',
        'Common.util.*',
        'Admin.view.main.Main'
    ]


});

当然,将快速模版的 app.js 覆盖原有的文件也行,这里主要的改变是没有指定主视图,而是需要在 application.jslaunch 方法中创建,这样做的主要原有是为了显示如下图所示加载等待信息。

初试Ext JS 6.6的NPM版(二)

图中的图标显示不了是因为图标字体还没加载,建议还是不要使用图标字体,直接用图片代替比较合适。

还要将 application.js 修改为以下内容:

Ext.define('Admin.Application', {
    extend: 'Ext.app.Application',
    name: 'Admin',

    launch: function () {
        Ext.ariaWarn = Ext.emptyFn
        Ext.getBody().removeCls('launching')
        var elem = document.getElementById("splash")
        elem.parentNode.removeChild(elem)

        var whichView = 'mainview'
//      var loggedIn = localStorage.getItem("LoggedIn");
//      if(loggedIn != 'true') { whichView = 'loginview' }
        console.log(whichView);
        if (Ext.isClassic == true) {
            Ext.create({xtype: whichView, plugins: 'viewport'})
        }
        else {
            Ext.Viewport.add([{xtype: whichView}])
        }
    },

    stores: [
        // TODO: add global / shared stores here
        'NavigationTree'
    ],

    init: function(){
        Ext.util.Format.defaultValue = function (value, defaultValue) {
            return Ext.isEmpty(value) ? (Ext.isEmpty(defaultValue) ? '无': defaultValue) : value;
        }
        Ext.Ajax.on('beforerequest', this.onAjaxBeforeRequest, this);
        Ext.Ajax.cors = true; 
        SESSION.init().then(SESSION.processData);
    },    

    onAppUpdate: function () {
        Ext.Msg.confirm(I18N.ApplicationUpdate, I18N.ApplicationUpdateMsg,
            function (choice) {
                if (choice === 'yes') {
                    window.location.reload();
                }
            }
        );
    },

    onAjaxBeforeRequest: function(conn , options , eOpts ){
        if(!options.headers) options.headers = {}
        Ext.apply( options.headers, HEADERS.getHeaders());
    },

    initSignalR: function(){
        var connection = new signalR.HubConnection(ROOTPATH +'/signalr');
        connection.start();               
    }
});

主要是将 launch 方法之外的内容复制过来。由于在 launch 方法中使用了xtype来创建主视图,因而需要在主视图中添加 xtype 配置项,值为 mainview

为了能让客户端的访问地址为 http://localhost:4200 ,以便配合快速模版的后端程序使用,需要修改 webpack.config.js 文件,将 portfinder.basePort 的值修改为 4200 ,将 devServerhost 值修改为 localhost

好了,一切准备就绪,运行后端程序并执行 npm start 命令打开客户端,就可看到登录窗口,登录后就能看到用户视图了。这说明迁移已经成功,可以在此基础继续后续开发了。

源代码: https://gitee.com/tianxiaode/ext-npm-6.6

快速模版地址: https://github.com/tianxiaode/qTemplate-ExtJS


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

代码大全

代码大全

迈克康奈尔 / 电子工业出版社 / 2006-12 / 148.00元

《代码大全(第2版)(英文版)》由电子工业出版社出版。一起来看看 《代码大全》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换