上个月和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)

Extjs6随笔(终篇)——内容总结的更多相关文章

  1. (十三) [终篇] 一起学 Unix 环境高级编程 (APUE) 之 网络 IPC:套接字

    . . . . . 目录 (一) 一起学 Unix 环境高级编程 (APUE) 之 标准IO (二) 一起学 Unix 环境高级编程 (APUE) 之 文件 IO (三) 一起学 Unix 环境高级编 ...

  2. jackson学习之十(终篇):springboot整合(配置类)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  3. JUnit5学习之八:综合进阶(终篇)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  4. OpenFaaS实战之九:终篇,自制模板(springboot+maven+jdk8)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  5. disruptor笔记之八:知识点补充(终篇)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  6. 支持JDK19虚拟线程的web框架,之五(终篇):兴风作浪的ThreadLocal

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos <支持JDK19虚拟线程的web框架>系列 ...

  7. 网站静态化处理—web前端优化—下【终篇】(13)

    网站静态化处理—web前端优化—下[终篇](13) 本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部, ...

  8. .NET Core实战项目之CMS 第八章 设计篇-内容管理极简设计全过程

    写在前面 上一篇文章中我带着大家进行了权限部分的极简设计,也仅仅是一个基本的权限设计.不过你完全可以基于这套权限系统设计你的更复杂的权限系统,当然更复杂的权限系统要根据你的业务来进行,因为任何脱离实际 ...

  9. 人脸检测及识别python实现系列(6)——终篇:从实时视频流识别出“我”

    人脸检测及识别python实现系列(6)——终篇:从实时视频流识别出“我” 终于到了最后一步,激动时刻就要来临了,先平复一下心情,把剩下的代码加上,首先是为Model类增加一个预测函数: #识别人脸 ...

随机推荐

  1. 集美大学网络1413第十一次作业成绩(团队七) -- Alpha冲刺之事后诸葛亮

    题目 团队作业7--Alpha冲刺之事后诸葛亮 团队作业7成绩  团队/分值 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队角色. 管理.合作 总结 讨论照片 团队成员 角色.贡献 总 ...

  2. 团队作业八—第二次团队冲刺(Beta版本) 第 1 天

    一.每个人的工作 (1) 昨天已完成的工作 由于是才刚开始冲刺,所以没有昨天的工作 (2) 今天计划完成的工作: 对界面的优化和一些细节的完善 (3) 工作中遇到的困难: 工作中出现了意见不一的情况 ...

  3. Swing-JCheckBox用法-入门

    JCheckBox是Swing中的复选框.所谓复选框就是指,可以同时存在多个这样的控件,它们可以有多个处于被选中状态.对于每一个复选框而言,它只有选中和未选中两种状态. JCheckBox的常用方法如 ...

  4. 团队作业4——第一次项目冲刺(Alpha版本) 4.24

    团队作业4--第一次项目冲刺(Alpha版本) Day four: 会议照片 每日站立会议: 项目进展 今天是项目的Alpha敏捷冲刺的第三天,先大概整理下昨天已完成的任务以及今天计划完成的任务.今天 ...

  5. 201521123117 《Java程序设计》第3周学习总结

    1. 本周学习总结: 2. 书面作业 Q1:代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...

  6. 201521123115 《Java程序设计》第1周学习总结

    1. 本周学习总结 之前一直没有用心学,这周上课虽然认真但还是太多不懂加上还要补考没有时间来消化所以很多都是囫囵吞枣,希望能够赶快补上把. 知道了java的前世今生,JVM/JRE/JDK,JVM就是 ...

  7. 201521123066《Java程序设计》第十三周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  8. 控制结构(1) 分枝/叶子(branch/leaf)

    // 下一篇:卫语句(guard clause) 典型代码: function doSomething1(){ // ... } function doSomething2(){ // ... } f ...

  9. 你不知道的JavaScript——类型

    一.ECMAScript语言中所有的值均有一个对应的语言类型.ECMAScript语言类型包括Undefined.Null.Boolean.String.Number和Object. 我们这样来定义类 ...

  10. eclipse 项目引入第三方jar包 3种方法

    我们在用Eclipse开发程序的时候,经常要用到第三方jar包.引入jar包不是一个小问题,由于jar包位置不清楚,而浪费时间.下面配图说明3种Eclipse引入jar包的方式. 1.最常用的普通操作 ...