`

ExtJs源码分析与学习—ExtJs源码结构

阅读更多

一、源码的目录结构

以下是以官方最新版本ext-3.3.1列出源码目录结构


1、  adapter :适配器,主要是ExtJs 提供了4中适配器 extjqueryprototypeyui。通过这些适配器,可以使ExtJs的应用建立在这些框架之上

2、  core:对ext-core的补存

3、  data:封装了ExtJs的数据模型

4、  dd:封装了ExtJs组件的拖拽操作

5、  directExtJs数据请求方式

6、  ext-coreExtJs的核心代码,提供了元素、事件、模板、CSS查询dom对象等基础实现

7、  locale:国际化支持,提供了多语言包

8、  stateExtJs组件的状态管理

9、  utilExtJs工具类的集合,主要对日期、集合、事件架构等进行了封装和复写

10、              widgets:封装了ExtJs UI组件

11、              debug.js:用来调试ExtJs工具包

12、              error-checking.js 错误输出信息

其中widgets下源码结构为:


1、  chart:提供了统计图表功能

2、  form:封装了form提交表单

3、  grid:数据列表相关实现,用来显示列表,可以实现数据分页显示,动态修改数据功能

4、  layout:组件布局

5、  list:简单列表的实现,如果没有分页或是只显示几条简单列表数据,利用这个组件来实现比较好。

6、  menu:菜单和工具栏的封装

7、  tips:工具提示

8、  tree:树形组件的封装

9、  其他单个js类主要是组件中需要用到的工具类、继承类、组件管理类等。

二、在分析ExtJs源代码之前介绍一下ExtJs调试工具,这是个好东东,方便开发人员书写高质量的代码,再也不用alert烦人的提示了。

1、  首先把extjs/src/debug.js文件引入所要调试的页面

2、  在需要调试的地方输入以下语句即可

Ext.log(‘This is a ExtJs debugger’);

3、  运行页面时,凡是在添加Ext.log信息的页面下方EXT都会自动生成调试信息,并且显示在CONSOLE控制台中,类似eclipseCONSOLE。另外在控制台右侧窗口中输入要执行的代码,点击【run】可以查看运行结果,比如Ext.getCmp(‘comId’).getValue();

4、  ExtJs调试控制台 console默认是渲染到body下,如果页面本身渲染的区域覆盖住了调试控制台(用该组件Ext.Viewport时可能会覆盖),则可以动态的修改console渲染的位置,可以修改源码debug.js。在代码

cp.render(Ext.getBody());处可以修改为以下

cp.render(Ext.get('debug'));//debug为页面中dom元素

 

 

  • 大小: 9.4 KB
  • 大小: 28.4 KB
分享到:
评论
1 楼 tangjikey 2012-04-12  
不错,很清楚,受益良多。

相关推荐

Global site tag (gtag.js) - Google Analytics