初试Ext JS 6.6的NPM版（二）

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

这里写图片描述

下面尝试把快速模版的东西迁移过来试试。先把app\desktop\src\view文件夹下的文件和文件夹删除。然后将快速模版中的app\view中的文件复制过来。把NavigationTree.js文件复制到app\desktop\src\store文件夹，把Base.js和User.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.js的launch方法中创建，这样做的主要原有是为了显示如下图所示加载等待信息。

这里写图片描述

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

还要将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，将devServer的host值修改为localhost。

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

源代码：https://gitee.com/tianxiaode/ext-npm-6.6
快速模版地址：https://github.com/tianxiaode/qTemplate-ExtJS

初试Ext JS 6.6的NPM版（二）

猜你喜欢