从sencha touch迁移至extjs6开发的注意事项

当前使用的extjs版本为6.0.0，sencha cmd 的版本为6.0.1.76。

 

sencha touch被合并到extjs6里面，extjs6可以开发桌面端、移动端、甚至通用的web app（针对不同设备类型自动显示不同的页面），相同的代码可以共用，比如桌面端和移动端假如只是界面不同，像model和controller那些如果相同的话可以共用，即便是有些区别也可以写个父类，然后移动端和桌面端的代码分别继承该类并添加额外功能。

 

另外，extjs6也支持MVVM了，利用官方文档的最佳实践MVVM+MVC混合来开发，真的令人很愉悦。

当然我们只是开发移动端的，下面介绍下怎样做。extjs6引入了toolkit概念，做移动端的toolkit是modern，桌面端的是classic，我们将用它的modern toolkit来开发。

创建一个app：sencha –sdk (sdk目录) generate app –modern (app名称) (生成的目录)

例如：sencha –sdk G:\lib\JavaScript\extjs\ext-6.0.0-gpl\ext-6.0.0 generateapp –modern Test my-test

 

如果不加“-modern”的话它会自动生成一个通用app，有app、classic和modern三个目录存放源代码，app为共用代码目录，classic和modern分别为桌面端和移动端的不共用代码。但我们只是做移动端的，所以存放源码的就一个app目录。

应用目录结构大致是这样：

ext为extjs6的sdk目录

sass为存放本应用的scss样式文件的目录

resources为存放资源的目录

packages存放包，里面可以放主题或代码，在app.json里面可以require进来，比如我们以前继承了主题“theme-cupertino”，自定义了一个苹果主题，现在又拷到packages里面，然后我们只需要在app.json里面require一下，并且将theme改为我们自定义的主题的名称，就可以直接利用以前做好的主题继续开发。

也可以利用sencha cmd来generate一个workspace，这样packages就可以直接在多个应用共用，不需要复制。

移动端的主题在ext/modern/目录下：

该目录下还有一个名为modern的目录，那是JavaScript源代码，下面的是主题的源代码， theme-cupertino(苹果)、theme-mountainview(安卓)、theme-windows(windows phone)这几个主题都是继承于 theme-device-base，是现成的智能设备风格的主题

 

 

其实也可以直接用sencha的jetbrains的插件，可在webstorm和IntelliJ IDEA上用，那样很多时候就不需要sencha cmd了，直接可视化操作（创建app、workspace、各种类），只不过有30天试用期限（可以在过期之前将系统时间调回以前，就不会过期了）