Ext JS 学习笔记(1)

      一直在使用Ext JS框架做应用系统，但是每次只是在应用他的层面上转悠。随着接触的系统业务越来越复杂，界面的显示要求也越来越高了。现在感到自己的Ext JS和JavaScrpit的水平明显有了不足。下定决心，在最近的一段时间内，坚持学习Ext JS的源码，构建出一套自己的组件库。

     本节内，要完成的任务就是对Ext JS的文件组织结构有个最初的印象。以便后面深层次的扩展开发使用。

文件或子文件夹	说明
adapter	adapter文件夹为Ext JS提供了适配器。Ext JS提供了4种适配器：Ext,Jquery,Prototype,YUI.通过这些适配器可以使用Ext JS 的应用建立在JQuery，Prototype，YUI等框架之上。
ari	针对AIR 1.0中的应用程序的沙箱提供运行支持，使JS 能够轻松实现访问并实现本地的功能。
pkgs	编译压缩过的JS文件
docs	帮助文档
examples	实例演示
resources	Ext JS 所有的CSS样式以及图片资源
source	Ext JS的所有源码
ext-all-debug.js	用于调试的时使用的类库文件，使用前必须要引入适配器
ext-all.js	经过编译压缩的类库文件，使用前必须要引入适配器

表1.Ext JS文件夹中的文件

文件或子文件夹	说明
adapter	适配器源码的实现。
core	核心源码，提供了事件，元素，模板，css查询等基础实现
data	数据模型
dd	拖拽功能
direct	提供了RPC和Comet两种数据请求
locale	国际化的支持
state	组件的状态管理
util	实用工具类的集合
widgets	UI组件的集合
debug.js	用于实现调试功能的源码

表2.Ext JS的source文件夹

文件或子文件夹	说明
chart	图表功能
form	表单渲染，提交
grid	数据列表
layout	布局
list	构建在DataView上可以做简便列表。更加灵活
menu	菜单
tips	工具提示
tree	树形组件
Component ComponentMgr BoxComponent Container Panel TabPanel Viewport Window WindowManager MessageBox	该组实现了Ext JS的主线架构：组件→BoxComponent→容器→面板→窗体→消息窗体 组件(Component和BoxComponent)提供基础功能 容器(Container)实现子组件的排列布局 面板(Panel)可视化的面板管理 窗体(Window)构建在面板之上，提供窗体所需的功能 消息窗体(MessageBox)消息弹出窗体
Action Button ButtonGroup CycleButton SplitButton ToolBar SpiltBar PagingToolbar	该组实现动作，按钮和工具栏3部分功能 Action：抽象出所有的单击动作。 Button：分为标准按钮，CycleButton，SplitButton等类型 工具栏(ToolBar):存放工具按钮
DataView DatePicker Editor Layer LoadMask Resizable Shadow Slider	该组实现辅助功能 Layer实现浮动层 Shadow实现浮动层的阴影效果 DataView结合数据模型和模板实现页面内容 Editor用来实现组件的可编辑性 Resizable用来改变组件大小 DatePicker实现日期控件 Slider实现滑动条效果

表3. Ext JS的widgets文件夹

这里我们对Ext JS的文件组织方式有了大概的了解，以便于后期学习打下了一个良好基础。