Ext JS 6开发实例(二) :使用CMD创建应用程序

由于Ext JS 6将原来的Ext JS和Sencha Touch合并为一个框架,因而在使用CMD来创建应用程序前,需要考虑清楚你是要创建一个通用应用程序,还是仅仅只是针对桌面或移动设备的应用程序。

要做这样的考量,是因为通用应用程序和比较单一的应用程序在开发上会有些小麻烦。这些小麻烦主要是因为Ext JS的自动加载机制造成的,有时候会很困扰人。

Ext
JS的自动加载机制是根据类名来划分目录兵加载脚本的,例如SimpelCMS.view.Main,如果没有自定义过SimpelCMS的路径指向,默
认的脚本位置就是app/view/Main.js目录。在Ext JS
6中,通用应用程序为了区分桌面和移动两个应用程序所需要的不同的文件,添加了classic和modern目录,这时候问题就来了,同一个类名,可能是
在app目录,也可能是在classic或modern目录。如果直接根据自动加载机制,就会出现找不到类文件的情况(默认在app目录下找),为了解决
这一问题,就以指定路径的方式将类与对应的路径写在了classic.json和modern.json文件中。这时候,另外一个问题产生了,当你新建了
一个类的时候,你就必须build一次,将类的路径写进classic.json或modern.json中,不然就找不到该类了,也就是说,你最好是执
行sencha app
watch监控着目录,让cmd随时去生成classic.json或modern.json,这点对开发来说应该问题不大。最主要的还是生成操作需要获
取首页文件的路径,然后根据脚本与首页的相对路径来构建脚本的路径,这对于使用MVC作为后台开发的应用程序来说就会出现找不到脚本的情况,还需要通过调
整bootstrap.js来修正,总的来说是小问题很多,不过,整个过程熟悉了之后,问题也不算太大。而对于只针对唯一平台的项目,就没这个困扰了,会
减少不少麻烦。

由于SimpelCMS并没有针对移动平台的考量,因而不需要创建通用应用程序,这样,开发环境和过程就和之前Ext JS 4的差不多了。下面来创建这个应用程序。

由于命令使用太少,记忆力也不怎么样,会不记得如何来创建应用程序,这时候,可以先输入以下命令来获取帮助:

sencha help gen app11

这时候会看到如下图所示的输出:

从图中可以看到,这个帮助做得不错,在图中的3、4行就给出了创建针对于特定平台的创建应用程序的命令格式。其中,第3行的参数“classic”就清楚表明了这只创建一个针对桌面平台的经典应用程序,而第4行则是创建针对移动设备的现代应用程序。

下面执行以下命令来创建一个名为SimpleCMS的应用程序:

sencha -sdk d:\Workspace\ext6 gen app -classic SimpleCMS ./SimpleCMS11

以上命令添加了sdk参数用来指定Ext JS 6的框架目录,不然它会从互联网上下载框架,这得花不少时间。

等待一会,就可在SimpleCMS目录看到以下目录和文件了:

对比之前使用Ext JS 4创建的应用程序,会发现目录结构基本差不多,因而,如果已经熟悉了Ext JS 4的开发,使用Ext JS 6进行开发,不会感觉太困难。

现在在Visual Studio打开之前创建的SimpleCMS项目,在解决方案资源管理器中将原来的Scripts目录修改为Scripts_old,并创建一个新的Scripts目录。然后将使用CMD创建的应用程序中的文件和目录复制到Scripts目录下。

接下来是修改首页。打开scripts目录下的index.html文件,将代码全部复制到Views\Home目录下的index.cshtml文件里。

注意:需要修改加载bootstrap.js脚本的路径。

打开app_start目录下的BundleConfig.cs文件,将暂时代码全部屏蔽掉,因为这些文件和目录已经没有了。

复制scripts目录的index.html文件,然后点选项目SimpleCMS,在右键菜单中选择粘贴,这样做的目的是为了在使用sencha app build命令的时候,让CMD能找到index.html文件,以免出现错误。

打开app.json文件,找到indexHtmlPath,将首页修改为“../index.html”,这样生成应用程序的时候就能正确设置路径了。

在命令提示符窗口进入Scripts目录,然后运行sencha app build命令重新生成一下应用程序。

好了,现在在生成菜单选择重新生成解决方案,然后在调试菜单选择“开始执行(不调试)”,就可在浏览器看到如下的界面了:

今天就说到这里了。如果有任何疑问,可以到qq交流群391747779 进行咨询。

时间: 2024-11-12 21:23:07

Ext JS 6开发实例(二) :使用CMD创建应用程序的相关文章

Ext JS 6开发实例(一)

很久没写文章了,主要原因和大家差不多,都要为生活奔忙,搞了两个小项目.这两个小项目很凑巧,都可以使用Ext JS来开发,这正是练习使用Ext JS 6的好机会,自然不会错过. 很多读者可能会问,为什么不直接使用熟悉的Ext JS 4来开发,而使用结构完全改变了的Ext JS 6呢?首先,Ext JS 4的MVC模式,控制器的使用我觉得太繁琐了,不太喜欢,而6的修改为视图模型以及与视图绑定的控制器,我觉得写起代码来会挺舒服的.其次,对于组件的使 用等方面,熟悉Ext JS 4的,使用起Ext JS

Ext JS 6开发实例(三) :主界面设计

在上文中,已经将CMD创建的应用程序导入到项目里了,而且也看到默认的主界面了,今天的主要工作就是修改这个主界面,以符合项目的需要.除了设计主界面,还有一些其他的东西需要配置一下. 添加本地化包 打开app.json文件,找到requires,代码如下:     "requires": [      "font-awesome"     ],12341234 以上代码说明项目默认已经引用了Font Awesome的图标,可以在项目中直接使用.这个在项目的后续开发中会经

ext 6.0开发实例二

由于Ext JS 6将原来的Ext JS和Sencha Touch合并为一个框架,因而在使用CMD来创建应用程序前,需要考虑清楚你是要创建一个通用应用程序,还是仅仅只是针对桌面或移动设备的应用程序. 要做这样的考量,是因为通用应用程序和比较单一的应用程序在开发上会有些小麻烦.这些小麻烦主要是因为Ext JS的自动加载机制造成的,有时候会很困扰人. Ext JS的自动加载机制是根据类名来划分目录兵加载脚本的,例如SimpelCMS.view.Main,如果没有自定义过SimpelCMS的路径指向,

Ext JS 6开发实例(四) :调整主视图

上文把主界面设置好,但是主视图因为界面的微调出现了显示问题,本文将把它调整好了. 打开app/view/main/Main.js,可以看到主视图是派生于标签面板(Ext.tab.Panel)的.在视图的标签栏内,除了显示标签外,还显示了标题栏.由于已经重新设计了标题栏,主视图的标签栏就不需要了,因而先把这个去掉. 检查一下代码,会发现代码中有个header配置项,根据API可以知道,该配置项是用来定义面板的标题的,因而把这段代码先去掉.在浏览器中刷新一下,会看到如下图的效果: 从图中可以看到,标

【转】EXT JS MVC开发模式

原文链接:EXT JS MVC开发模式 在app(亦即根目录)文件夹下面创建controller.model.store和view文件夹,从名称上就知道他们该放置什么代码了吧.然后创建Application.js作为我们程序的入口文件,并在mvc.html中引用Application.js文件.目录结构-->app(根目录)------>controller------>model------>store------>view------>application.js(

Node.js Web开发(二)

上一篇文章主要介绍了koa2的基本操作(坐下坐下),但是每次都返回一样的HTML似乎也不可能,所以现在我们需要来处理URL了. 直接来点高级点的东西,我们需要一个能处理URL的middleware,它叫做:koa-router: npm install koa-router 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 const Koa = require('koa'); const router = require('koa-route

<ext JS> EXTJS的安装、sencha Cmd的安装、EXTJS数据包等

一.EXT的安装 Ext JS SDK. 在右方选择EXTJS,在输入邮箱,选中接受,然后下载,通过邮件的方式发送下载链接. 二.EXTJS的类声明方式与实例化操作 EXTJS声明方法:Ext.define(); EXTJS实例化方法:Ext.create(); 三.组件 组件(component) 是对数据和方法的简单封装. 组件体系: 这种元素间的关系使得组件呈现层级关系.下图 展示了 ExtJS4.x 中组件间层级关系一种实例. 子组件通过容器的items加入到容器中,下面这个例子通过Ex

arcgis api for js入门开发系列二不同地图服务展示(含源代码)

上一篇介绍了arcgis api离线部署,这篇开始正式介绍arcgis api for js开发:想要学习webgis开发,首先得熟悉了解前端技术,比如界面布局设计的html+css,核心的是javascript(js),arcgis api就是js写的,就是说想要开发gis功能前提下,你得熟悉了解js,不然你连源代码都看不懂.在这里,推荐esri官网的arcgis api for js:https://developers.arcgis.com/javascript/3/jsapi/:里面详细

cocos2d-x游戏开发(二)之创建第一个项目

配置好开发环境之后,尝试创建一个cocos项目 (1)打开cocos2d-x安装目录,如D:\DIY\cocos2d-x-3.3 看到目录下有可执行文件 download-deps 以及 setup ,先执行download-deps 键入 yes,这样可以避免重复下载库文件,然后执行setup 回车几次即可完成. (2)运行cmd命令窗口 键入cocos,可看到下面界面: (3)用命令创建一个cocos项目,键入cocos new 项目名 –p 包名 –l cpp –d路径 如:cocos n