内容简介:NPM版的Ext JS,在文件解构上与使用Cmd版的区别不大,最大的改变是样式文件(scss文件)不再要求放在sass文件夹,而是可以与视图文件放在一起,如下图所示。下面尝试把快速模版的东西迁移过来试试。先把
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
命令打开客户端,就可看到登录窗口,登录后就能看到用户视图了。这说明迁移已经成功,可以在此基础继续后续开发了。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- IntersectionObserve初试
- 初试 Helm 3
- Java 8 lambda初试
- 初试MongoDB数据库
- Podman 初试 - 容器发展史
- Nginx + Node + Vue 部署初试
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。