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