上个月和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. 201521123006 《java程序设计》 第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 class ArrayAlg { public static < ...

  2. 201521123078 《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 1.题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常. ...

  3. temp-成都农商行路径

    route add 30.3.4.0 mask 255.255.255.0 30.3.12.254 route add 30.3.12.0 mask 255.255.255.0 30.3.12.254 ...

  4. Spring-Struts2-基本集成

    步骤: 1,导入struts2的相关jar包(检查是否有冲突的包,即同一个包有不同的几个版本存在) 2,导入struts2和spring的整合包 struts2-spring-plugin-2.3.4 ...

  5. ambari

    http://blog.csdn.net/ggz631047367/article/details/50491616 https://cwiki.apache.org/confluence/displ ...

  6. css预处理语言--让你的css编写更加简单方便

    CSS预处理语言之一-------LESS Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Nod ...

  7. codeigniter 去除index.php (nginx,apache) 通用方法

    .htaccess文件配置 1 <IfModule mod_rewrite.c> 2 RewriteEngine On 3 RewriteBase / 4 RewriteCond $1 ! ...

  8. STM32获取DHT11温度传感器数据

    准备物件 STM32F103C8T6核心板 ST-LINK V2 DHT11 杜邦线若干 连接线 STM32F103C8T6芯片管脚图 管脚说明 连接仿真器 STM32 ST-LINKV2 VCC V ...

  9. thinkphp的select和find的区别

    hinkphp是比较好的php开发框架,能比较快速的开发MVC架构的管理系统,我们需要用到 select()和find()方法,两个方法都能返回数据集数组,但有什么不同呢?先看一下我的代码对比:$te ...

  10. 一个基于Asp.net MVC的博客类网站开源了!

    背景说明: 大学时毕业设计作品,一直闲置在硬盘了,倒想着不如开源出来,也许会对一些人有帮助呢,而且个人觉得这个网站做得还是不错了,毕竟是花了不少心思,希望对你有所帮助. github地址:https: ...