初试Ext JS 6.6的NPM版(二)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tianxiaode/article/details/81385935

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

这里写图片描述

下面尝试把快速模版的东西迁移过来试试。先把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方法中创建,这样做的主要原有是为了显示如下图所示加载等待信息。

这里写图片描述

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

还要将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

展开阅读全文

没有更多推荐了,返回首页