初试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​​