ExtJs学习笔记 经典版

6.Ext.data.Store篇.........................................................................................117.Ext.data.JsonReader篇一.........................................................................138.Ext.data.JsonReader篇二.........................................................................169.Ext.data.HttpProxy篇.................................................................................2010.Ext.data.Connection篇一.......................................................................2111.Ext.data.Connection篇二.......................................................................2512.Ext.Updater篇一......................................................................................2713.Ext.Updater篇二......................................................................................2814.JSON序列化篇........................................................................................3415.通信篇........................................................................................................3616.extJs2.0学习笔记(Ajax篇)....................................................................3917.extJs2.0学习笔记(Ext.data序论篇).....................................................4018.extJs2.0学习笔记(Ext.Panel终结篇)..................................................4119.extJs2.0学习笔记(事件注册总结篇)....................................................4620.extJs2.0学习笔记(Ext.Panel篇一)......................................................4921.extJs2.0学习笔记(Ext.Panel篇二)......................................................5122.extJs2.0学习笔记(Ext.Panel篇三)......................................................6023.extJs2.0学习笔记(Ext.Panel篇四)......................................................6324.extJs2.0学习笔记(组件总论篇)............................................................6725.extJs2.0学习笔记(Ext.ElementAPI总结)..........................................7026.extJs2.0学习笔记(Element.js篇).........................................................7427.extJs2.0学习笔记(DomHelper.js篇)...................................................7728.extJs2.0学习笔记(ext.js篇)..................................................................781.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。这下组件的大概结构都清楚了。还有不明白，自己newExt.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元素注册，怎么会统统注册到ul这个父容器上面呢？原理就是事件冒泡。关于事件传递的原理，本人在下一文中有详细的实验、明确的结论，不再赘言。ul元素捕获了事件，怎样在事件处理函数中得知倒底是哪个li发生了事件呢？Ext写了个函数：findTargets。详情请见如下代码：findTargets:function(e){varitem=null;varitemEl=e.getTarget('li',this.strip);if(itemEl){item=this.getComponent(itemEl.id.split(this.idDelimiter)[1]);if(item.disabled){return{close:null,item:null,el:null};}}return{close:e.getTarget('.x-tab-strip-close',this.strip),item:item,el:itemEl};},//privateonStripMouseDown:function(e){e.preventDefault();if(e.button!=