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

zcpHappy 2014-01-11

博客分类: Extjs
ext 
内容引自 lindar0209

一、源码的目录结构

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


1、  adapter :适配器,主要是ExtJs 提供了4中适配器 ext、jquery、prototype、yui。通过这些适配器,可以使ExtJs的应用建立在这些框架之上
2、  core:对ext-core的补存
3、  data:封装了ExtJs的数据模型
4、  dd:封装了ExtJs组件的拖拽操作
5、  direct:ExtJs数据请求方式
6、  ext-core:ExtJs的核心代码,提供了元素、事件、模板、CSS查询dom对象等基础实现
7、  locale:国际化支持,提供了多语言包
8、  state:ExtJs组件的状态管理
9、  util:ExtJs工具类的集合,主要对日期、集合、事件架构等进行了封装和复写
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控制台中,类似eclipse的CONSOLE。另外在控制台右侧窗口中输入要执行的代码,点击【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元素

相关推荐

TiDBPingCAP / 0评论 2020-07-29