ExtJs学习笔记
ExtJs学习笔记

目录
1. ExtJs 结构树 2
2. 对ExtJs的态度 3
3. Ext.form概述 4
4. Ext.TabPanel篇 5
5. Function扩展篇 7
6. Ext.data.Store篇 10
7. Ext.data.JsonReader篇一 12
8. Ext.data.JsonReader篇二 15
9. Ext.data.HttpProxy篇 19
10. Ext.data.Connection篇一 20
11. Ext.data.Connection篇二 24
12. Ext.Updater篇一 26
13. Ext.Updater篇二 27
14. JSON序列化篇 33
15. 通信篇 35
16. extJs 2.0学习笔记(Ajax篇) 38
17. extJs 2.0学习笔记(Ext.data序论篇) 39
18. extJs 2.0学习笔记(Ext.Panel终结篇) 40
19. extJs 2.0学习笔记(事件注册总结篇) 45
20. extJs 2.0学习笔记(Ext.Panel篇一) 48
21. extJs 2.0学习笔记(Ext.Panel篇二) 50
22. extJs 2.0学习笔记(Ext.Panel篇三) 59
23. extJs 2.0学习笔记(Ext.Panel篇四) 62
24. extJs 2.0学习笔记(组件总论篇) 66
25. extJs 2.0学习笔记(Ext.Element API总结) 69
26. extJs 2.0学习笔记(Element.js篇) 73
27. extJs 2.0学习笔记(DomHelper.js篇) 76
28. extJs 2.0学习笔记(ext.js篇) 77





1. ExtJs 结构树

2. 对ExtJs的态度
extjs的确是个好东西，但是，它的优点也就是它的缺点：
? 加载页面慢
? 时间一长，浏览器占内存就会疯长
? 服务器端功能极度削弱，除了数据库操作外，几乎所有功能都到了客户端，还得用javascript来写。
? 功能全到了客户端，而客户端语言javascript的编写还是有许多的麻烦，真正精通它的人极少。
? javascript对于大部分人来说，不易调试
? 大量存在的javascript代码难以维护
? 开发速度极慢。
? extjs本身还存在一些问题
　　正是因为有这么多的问题，老板们都得掂量一下了。用它倒底值不值。当然，这儿也得说一下它的优点：
? 因为一切都是javascript搞定，所以，界面上的问题再也不像以前一样让人郁闷了，客户端对界面的的操作取得极大的便利，而不像以前一样，服务器端生成n多垃圾代码，以前的时代就彷佛隔靴搔痒，服务器端企图布置好一切。现在不同了，客户端用一个Ext.Ajax.Request请求数据方便，然后，显示出来也容易。
? 又回到了c/s时代。c/s让人神往啊。web该死的无状态让人郁闷
? 学习extjs的一个极大的好处，所有当前web开发界面上的需求都可以在这儿找到答案。通过研究它的代码，我们可以开发出自己的ajax框架来，可以写出适合于自己的widgets来。而不用背着extjs那个大乌龟壳。
　　我认为，不宜用extjs来开发整个应用，但是，在极为需要的地方用一用，还是蛮好的，整个站点都用它那就麻烦了。现在我对于选择ajax框架有了一点心得。
　　不要使用extjs来开发，但是，一定要学习、研究它，研究它之后才会晓得，我们写代码应当这么写才优美、才合适。研究了它后就应当选一款轻量型的框架了。然后自己写组件。用以取代：Ext.Window、Ext.TabPanel、Ext.Panel这些好东西。
　　研究了extjs，我敢说：一览众山小啊！什么prototype、dojo、jQuery之类，就容易多了。

　　真正要用的ajax框架，我看，倒不如选择prototype，它是个轻量型，我觉得，一个ajax，只要封装了三个东西就行了：
　　一、Element。把dom元素要封装一下，加入动画、求取、设置各种参数值的功能
　　二、XMLHttpRequest，要把它封装一下，这个所有框架都做了
　　三、把事件机制要封装一下，最好像extjs一样，xxx.on('click',function(){});就成了。
　　有了这三个就差不多了，那些什么window、tabs，网上多的是代码，搞些下来改篇改篇就成了。
　　关于prototype，我找到了它的中文文档(1.5的)，1.5的大小是93.7k，事实上，这个大小还可以缩小，可以使用工具去掉多余的空格，差不多了。

3. Ext.form概述
　　Ext.form中封装了是输入组件。input、textArea、frameSet、form等元素都被包装起来了。我刚才发了点时间对它的类图分析了一下，用StartUML做了图如下：

　　Ext.form中的组件太多，实在不大
4. Ext.TabPanel篇
　　Ext.TabPanel这个东西是最常用的组件之一，它继承自Ext.Panel。看了一个下午的源代码，对它的一些基本原理有所了解了。
　　下面要讲一些问题，这些问题绝对是本人独门秘笈，非入室弟子不传。哈哈哈。
　　一、组件的组成：
　　因为继承自Ext.Panel，所以，它也是由header、tbar、body、bbar、footer这几个部分构成，有人问：TabPanel的面板标签是在哪儿呢(就是你点击换页的东西)？它默认是放在header中的。但是，如果设置了：tabPosition的话就不一定了，tabPosition可取两个值：top、bottom。所以，标签可以是放在下面，但是，Ext目前还不支技放在左边、右边。
　　那么，不同的标签是用什么元素来组织的呢？用ul。一页对应一个li。li的id的取值有规律哦，它的取值公式如下：tabpanel.id+tabpanel.idDelimiter+面板的id。正是因为有了这个规律，才能根据点击的标签而找到对应的面板。这个问题是一大主题，在下面讲。
　　这是面板的标签，下面的面板呢？简单！！！一个Ext.Panel对应一个面板，注意：这儿的面板是没有header的，如果你想tab.items.get(1).header，在这儿，header===undefined。为什么为面板定义的title会对应到标签中去呢？这个是TabPanel的特意处理的。至于换页效果是怎么出来的？CardLayout。这下组件的大概结构都清楚了。还有不明白，自己new Ext.TabPanel({……})一个，然后在FireBug下面去查看dom结构，就一清二楚了。
　　二、处理标签的事件
　　为什么要研究这个问题？有需求的，如何在鼠标移到标签上时就显示对应的面板呢？默认情况下，TabPanel是不支持这个功能的，但是，这个功能有时是需要的。这儿有点小技巧。
　　看Ext.TabPanel源代码中关于标签的事件处理：
        this.strip.on('mousedown', this.onStripMouseDown, this);
        this.strip.on('click', this.onStripClick, this);
        this.strip.on('contextmenu', this.onStripContextMenu, this);
        if(this.enableTabScroll){
            this.strip.on('mousewheel', this.onWheel, this);
        }
　　这段代码写在initEvents函数中，先解释一下，this.strip是指头部放标签的那个ul元素，相信，98%的读者会想，要注册事件也应当是为li元素注册，怎么会