一、基本概念


ExtJS 简介

  - ExtJS 是一个兼容各浏览器的纯 JavaScript 应用程序框架，使用它可以创建最佳跨平台互联网应用程序

wKioL1cE9EfAoNqaAAGz2BKBRXc255.png



为什么 ExtJS 原因

wKioL1cE9HvwwUfmAABFcH3EaXM935.png


二、环境搭建


目录结构

  - 推荐下面这种目录结构

wKioL1cE9Mmz_kE6AACC1jX_sCQ851.png


使用ExtJS

wKiom1cE9DqQGLsbAABrEci4Vek941.png


动态加载

wKiom1cE9JqTeGX0AAELPACYrS8393.png


引入库的方法

wKioL1cE9V7wNL91AAEiJMuxpQ4601.png


发布

wKiom1cE9P_zSYKmAACsf4uOzN8587.pngwKiom1cE9Raw8DH_AAAgxcH2AFg792.pngwKioL1cE9f-ifiAkAANKDE3pSqI418.png


Containers容器

wKiom1cE9YPhqQt3AAHkq3InSj0376.png


Panel

wKioL1cE9lGh_x0_AAEZKY0mxq4391.png


Layouts布局

wKiom1cE9cSxWYVpAAFEzPe6Ydg616.png


布局系统如何工作

wKioL1cE9pLwf4BBAAPYWTLR_gM365.png


组件component

wKiom1cE9gajwUA8AAGxf7RRKqE308.png


别名和延迟初始化

wKioL1cE9tKA2DDfAAGrPDdwOeU325.png


显示和隐藏

wKiom1cE9j-AFoSSAADTuW--iic236.png


浮动组件

wKiom1cE9lyS9VgKAAF_jGxsFCI050.png


数据

wKiom1cE9ojybssDAAFsy3MZ3rQ916.pngwKiom1cE9p-DpTL2AAFy7178pJc052.png



模型和存储(Model & Stores)

wKioL1cE93Hyb_VhAAJyWOuQ1Wk310.pngwKiom1cE9uWB-PChAAJocd7T9Ko341.png


创建一个模型 Model

wKiom1cE9wOxUgvCAAD_YtCmwRY685.png


创建一个存储Store

wKiom1cE9zPTZjUZAAIuSx81TEY695.pngwKioL1cE-AGzBRBWAAG6RCMdDbI177.png


Grids 表格

wKiom1cE93DzAmWRAADc5jIMURE618.png


Tree 树组件

wKiom1cE-DqQjUf0AAFbJnKwXPE219.png


树组件常用配制

wKiom1cE-MqBlJGnAABAp7JUSYs394.png


Form表单控件

wKiom1cE-O7AK3pxAAEy3n4VGbw167.png


Field 类型

wKioL1cE-brDUxugAAB4XuJhXaQ363.png


校验

wKiom1cE-Umg13t_AADj-eLnPlU627.pngwKioL1cE-hCiyyZnAACBUPaXl9Y764.png


处理数据

wKiom1cE-lyRSBFBAABxmq9RWhc665.png


布局

wKioL1cE-6jgDjYLAAB3IXrgP9I951.png


MVC架构

wKiom1cE-xiSinMAAAEdwbNVH2w932.png


文件结构

wKiom1cE-0CxEFKkAAEpGvhb4AQ942.png


Chart图表

wKioL1cE_BzgC8GkAALfRhDgMgM252.png


总结：本章内容主要介绍了 ExtJS 基本概念、环境搭建