ExtJS 学习路径

Javascript 基础

• 同步和异步
• 回调
• json、ajax和jsonp
• call()、apply()、bind()
• 闭包
• 作用域
• 上下文
• this关键字
• 原型和原型链
• 基于原型的继承

ECMAScript 6

• const / let
• 函数的扩展
  • 箭头函数
  • 参数默认值
• object key value 简写
• 模板字符串
• Array 的扩展
  • forEach/map/some/every
  • for(let item of array) { }

ExtJS

• 官方指南 + API 文档
  • 官方指南部分中文翻译
• 官方示例
  • Kitchen Sink 示例
  • Admin Dashboard 示例
  • Coworkee 员工通讯录示例
    • 项目Github地址
• 其它书籍
  • ExtJS 6 Tutorial 英文原版
  • ExtJS 6 By Example
    • 英文原版
    • 中文翻译

Viewport

Component

容器 Container

类和实例

• 定义类define
• 继承extend、覆盖override
• 单例类singleton
• 静态成员statics、inheritableStatics，私有成员privates
• 实例化方法 create/widget/factory

布局 Layout

Classic 和 Modern 都有有的布局

• fit
• card
• box(vbox/hbox)、以及和 css3 弹性盒子布局 的关系

另外 classic 特有的布局

• border
• column

事件 Events

fireEvent/on/un

命名规范

类名、xtype、cls样式类
文件名和类名要对应

注释规范

项目结构 app.json

• 环境搭建: ExtJS / Sencha cmd

• 在浏览器访问 ext-6.x.x-trial.zip 里 examples示例 的正确方法

• 仅创建项目
  假设 extjs sdk 解压到了 D:\extjs 目录下

  • 方法1
    • sencha config --prop sencha.sdk.path=D:\extjs --save (此句只永久执行一次)
    • cd /d D:\demo
    • sencha app init [email protected] --modern Demo
  • 方法2
    • sencha -sdk D:\extjs\ext-6.5.3 generate app -modern Demo D:\demo

• 创建工作空间+项目

  • sencha generate workspace D:\Develop\AIO7\Perform-FrontEnd
  • sencha -sdk G:\ext-6.5.3 generate app -modern Perform1 Perform1

• 创建工作空间+项目(并保留以往的 .sencha/app 目录)

  • sencha generate workspace --full D:\Develop\AIO7\Perform-FrontEnd
  • sencha -sdk G:\ext-6.5.3 generate app --full -modern Perform1 Perform1

sencha app watch

构建 sencha app build

配置项

• 介绍
• 高级使用
• 访问配置项的错误方法
  • textfield.config.readonly
  • list.store

数据包装

store / model / record / field

多重继承

Mixin

包 package

包的类型：theme 和 code

多语言

modern-locale

主题和样式

sass / scss、Theme、ui、字体图标
ExtJS 6 的一些 样式类配置项

模板

tpl、itemTpl

寻找(定位)组件

ComponentQuery

dom 操作

ExtJs大比拼JQuery：Dom文档操作

十大要避免的开发方法

资源管理 Resource Management

如何引用第三方 javascript 库

app.json 里 js: [] 里面引入，会随 app.js 一起打包

ViewModel

View控制器 ViewController

app控制器 Controller

路由 Router

多屏幕适配

builds, profile, responsiveConfig, platformConfig

IDE 和 代码规范

IDE

VSCode + ESlint + Sencha Plugin

ESLint

• javascript 代码规范
  • 命名规范：变量名、函数名
• 利用 ESLint 统一团队内开发 ExtJS6 项目 的 javascript 代码规范
• ExtJS 一些命名规范（非官方）