Extjs6随笔（终篇）——内容总结

上个月和Extjs说byebye了，以后大概也没机会用了。之前的博客有点乱，大家看着比较麻烦，所以趁着我还没忘，在这里总结一下♪(^∇^*)

写了个demo，传到git上了，有需要可以自取。Extjs-Demo（https://github.com/gingerJY/Extjs-Demo）

本文基于ext-6.0.0

一、用sencha cmd建立一个ExtJs小项目

• 首先，需要一个命令行工具。进入extjs所在目录。
• 然后，输入：sencha -sdk [ExtJs6.0文件夹地址] generate app [项目名称] [项目路径]
  • 例如：sencha -sdk ext-6.0.0 generate app MaiJiangDou JiangDou 

　　(注)：还可以加--classic或--modern建立pc或WAP单独项目

　　下图建了一个只有pc端的项目：

       

　　

二、在浏览器打开

• 转到项目所在目录下
• sencha app watch
• 在http://localhost:1841/，就可以打开生成的项目。

　　具体可以看Extjs6（一）——用sencha cmd建立一个ExtJs小项目 

　　

三、查看项目自带例子代码

• 由于这次建的是只有pc端的项目，所以我们要写的代码基本都放在app文件夹中

　　

• 主页面是Main.js，包含一个Tab切换。具体看 Extjs6（特别篇）——项目自带例子main.js拆分详解  

　　

• List.js是一个子页面，包含一个列表，列表中的数据来自store/Personnel.js

　　

• MainController.js是主页面的控制器，包含一些逻辑内容。

　　注：关于模型(Models)、视图(Views) 、控制器(Controllers)，可以看Extjs6官方文档译文——应用架构简介（MVC，MVVM）（这个有点烂尾了，不过这点内容也还是有用的⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄）

四、登录注销

　　具体看  Extjs6（二）——用extjs6.0写一个系统登录及注销 

　　          

五、写一个border布局的简单页面

• 页面整体框架 

　　具体看  Extjs6（三）——用extjs6.0写一个简单页面 

　　　　

• 子页面（center部分）   

　　具体看   Extjs6（五）——写一个包含toolbar、form、grid的子页面

　　关于各种form还有个专题  Extjs6组件——Form大家族成员介绍

　　

六、侧边栏跳转页面

 　　具体看 Extjs6（四）——侧边栏导航根据路由跳转页面 

七、新建弹窗

　　逻辑看  用extjs6.0写一个点击新建窗口的功能

　   布局参考  关于extjs表单布局的几种方式

　　

八、查询功能

　　具体看  Extjs6（六）——增删查改之查询 （这里还有一些get的总结）

九、删除功能

　　具体看  Extjs6（七）——增删查改之删除

十、改bug心得

　　接触Extjs半年多，感觉最难的就是调试，一出错就啥都不出来，下面算是一点改bug的小心得吧（看起来挺傻的）。

1. 逗号、括号有没有缺的，是不是英文符号；
2. 页面用到的组件是否引用了，路径是否正确；
3. xtype是否对应正确；
4. 看network，接口请求是否正确，返回数据是否正确；
5. 注意组件各种设置参数都是什么意思。

　　经常发生的就是这种小错误，其他特殊情况就要特殊对待了。

 END--------------------------------------------------------------------------------------

再贴一下代码地址吧(*^▽^*) Extjs-Demo（https://github.com/gingerJY/Extjs-Demo）