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

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

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

本文基于ext-6.0.0

1、用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端的项目：

       

　　

2、在浏览器打开

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

　　具体能够看Extjs6（一）——用sencha cmd创建一个ExtJs小项目 

　　

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

• 因为此次建的是只有pc端的项目，因此咱们要写的代码基本都放在app文件夹中

　　

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

　　

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

　　

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

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

4、登陆注销

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

　　          

 

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

• 页面总体框架 

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

　　　　

• 子页面（center部分）   

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

　　关于各类form还有个专题  Extjs6组件——Form你们族成员介绍

　　

 

6、侧边栏跳转页面

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

7、新建弹窗

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

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

　　

8、查询功能

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

9、删除功能

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

10、改bug心得

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

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

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

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

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