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文件夹中

  

  

  • 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)

 

posted @ 2017-10-19 17:23  麦豇豆  阅读(6432)  评论(7编辑  收藏  举报