ext 6.0开发实例二

由于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的差不多了。下面来创建这个应用程序。

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

1.sencha help gen app









从图中可以看到，这个帮助做得不错，在图中的3、4行就给出了创建针对于特定平台的创建应用程序的命令格式。其中，第3行的参数“classic”就清楚表明了这只创建一个针对桌面平台的经典应用程序，而第4行则是创建针对移动设备的现代应用程序。
下面执行以下命令来创建一个名为SimpleCMS的应用程序：
sencha -sdk d:\Workspace\ext6 gen app -classic SimpleCMS ./SimpleCMS
1
1
 
  
 以上命令添加了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命令重新生成一下应用程序。
 
  
 好了，现在在生成菜单选择重新生成解决方案，然后在调试菜单选择“开始执行（不调试）”，就可在浏览器看到如下的界面了：