Extjs学习及应用经验小结

申请免费试用、咨询电话：400-8352-114

一、了解Html DOM、Ext Element及Component
　　要进修及使用好Ext框架，需求了解Html DOM、Ext Element及Component三者的区别。
　　Ext是基于Web的富客户端框架，其完满是基于规范W3C技能构建立的，运用到的都是HTML、CSS、DIV等相关技能。Ext最出色之处，是开拓了一系列十分简略易用的控件及组件，我们只需求运用这些组件就能完成各类丰厚多彩的UI的开拓。
　　无论组件有几多装备属性、照样事情、办法等等，其最终都邑转化为HTML在阅读器上显示出来，而每一个HTML页面都有一个条理清楚的DOM树范型，阅读器中的一切内容都有响应的DOM对象，动态改动页面的内容，恰是经过运用剧本言语来操作DOM对象完成。
　　仅仅有DOM是不敷的，比方要把页面中的某一个节点移到其它地位，要给某一个节点添加暗影结果，要埋没或显示某一个节点等，我们都需求经过几句 javascript才干完成。因而，Ext在DOM的根底上，创立了Ext Element，可以运用Element来包装任何DOM，Element对象中添加了一系列快捷、简洁的适用办法。
　　关于终端用户来说，仅仅有Element是不敷的，比方用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因而，除了Element以外，Ext 还树立了一系列的客户端界面组件Component，我们在编程时，只需运用这些组件Componet即可完成相关数据展现及交互等，而 Component是较高条理的抽象，每一个组件在衬着render的时分，都邑顺次经过Element、DOM来生成最终的页面结果。

　　在运用Ext开拓的使用顺序中，组件Component是最高条理的抽象，是直接给用户运用的，Ext Element是Ext的底层API，首要是由Ext或自界说组件挪用的，而DOM是W3C规范界说的原始API，Ext的Element经过操作DOM 来完成页面的结果显示。
　　在Ext中，组件衬着今后可以经过拜访组件的el属性来获得组件对应的Element，经过拜访Element的dom属性可以获得其下面的DOM对象。别的，我们可以经过经过Ext类的快捷办法getCmp、get、getDom等办法来得组件Component、Ext元素Element及DOM节点。比方：
　　var view=new Ext.Viewport();//创立了一个组件Component
　　view.el.setOpacity(.5);//挪用Element的setOpacity办法
　　view.el.dom.innerHTML="Hello Ext";//经过Element的dom属性操作DOM对象
　　再看下面的代码：
　　var win=new Ext.Window({id:"win1",title:"我的窗口",width:200,height:200});
　　win.show();
　　var c=Ext.getCmp("win1");//获得组件win
　　var e=Ext.get("win1");//依据id获得组件win响应的Element
　　var dom=Ext.getDom("win1");//获得id为win1的DOM节点
二、熟习ext组件系统
　　Ext2.0对整个框架进行了重构，最为出色的是推出了一个以Component类为根底的组件系统，在Component类根底上，运用面向对象的办法，设计了一系列的组件及控件。因而，要能挥洒自如地运用Ext，熟习Ext组件系统是最根本的。
　　在《ExtJS适用开拓指南》中，有如下面一幅组件图：
　　经过组件构造图我们可以了如指掌的看出整个Ext组件承继及构成系统，当运用一个组件的工夫，调查他的承继系统，如许可以便于我们把握组件的各类特征。
三、把握中心控件　
　　控件其实也是组件，比方用于显示树信息的TreePanel、用于显示表格的GridPanel及EditorGridPanel，还有代表使用顺序窗口的Ext.Window等都属于Ext控件。在运用Ext的时分，必然要把握一些中心控件，特殊是处于基类的控件。比方上面提到的几个控件，他们都是承继于面板Panel，所以我们要重点把握面板这个中心控件的特征。比方面板由以下几个局部构成：一个顶部东西栏(tbar)、一个底部东西栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个局部构成。面板类中还内置了面板睁开、封闭等功用，并供应一系列可重用的东西按钮使得我们可以轻松完成自界说的行为，面板可以放入其它任何容器中，面板自身是一个容器，他里面又可以包括各类其它组件。只需把握了Panel的使用，那么进修TreePanel、Window等就会变得简略得多。
　　相同的事理，关于Ext的表单字段来说，不论是ComboBox，NumberField、照样DateField，他们其它都是 Ext.form.Field类的子类，在他上面界说了表单字段的各类根本操作及特征。在进修运用表单字段组件时，必然要重点研讨Field这个类，把握他的首要办法、事情等，就能有助于更好的进修运用其它的字段。
四、进修及研讨示例
　　因为javascript言语十分灵敏，不像静态强类型言语（比方Java）那样有固定的代码设计形式，而往往是分歧的人就有分歧的编程作风。在实践使用开拓中，只要见多识广，才干在本人的在脑中树立一个开拓库。
　　进修他人的示例关于我们开拓协助会十分大，示例包罗根本组件的使用、综合使用等多个方面。在此，简略引荐几个。
　　1、Ext官方示例，在ext项面前目今载包的examples目次中，包罗各个控件的根本使用演示，还还有一些比拟复杂的组合示例，有简有繁，十分合适初学者仔细研讨。
　　2、Vifir推出的示例，Vifir推出的一些示例首要包罗两类，一种是开源的示例使用，别的一种是针对VIP用户的适用示例。开源的示例首要是指 wlr单用户blog系统，这个一个调集了前后台技能的ext综合示例，而针对VIP用户的适用示例则是可以作为开拓骨架或扩展组件的示例。

　　3、其它示例，在ext社区中还有良多比拟优异的ext使用示例，有些只是一个使用演示，固然没有供应源码下载，但我们可以直接下载援用的js文件来获得这些示例的ext使用代码，相同能取起到十分好的进修结果。
五、多运用
　　Ext看起来长短常简略的器械，稍有点编程常识的人，依照《ExtJS适用开拓指南》中的入门指南，半小时就能学会运用Ext。但是，当预备运用Ext开拓一个项目时，却不晓得从何处动手，或许是在运用Ext的时分，出了一点小问题本人不晓得该若何处理。编程是一门理论性的科学，仅仅靠看书、看他人写的代码是远远不敷的，因而，必需多做理论才行，只要经过不时的演习，很多的运用，才干对Ext的组件特征、事情、事情处置机制以及与效劳器端交互接口等深化的把握，只要多做运用，深化调查ext的组件的任务道理及机制，才干编写出高级的Ext的使用。
六、熟读Ext项目标源代码
　　假如要想深化使用Ext，那么阅读Ext项目标源代码这是必不成少的环节，Ext的代码质量十分高，经过阅读他的代码我们可以愈加深入的调查 javascript面向对象编程，Ext代码中包括了良多高级的js技巧以及设计形式。在运用Ext的进程中，我们常常依据项目标需求对Ext组件进行扩展，设计本人的组件或控件，而若何完成一个自界说的Ext组件，我们可以从Ext的各个组件源代码中找到谜底。

　　Ext的源代码在Ext项目标source目次。读Ext源码，并纷歧定非要从某一个当地开端，而组件中心代码Component.js、容器组件代码 Container.js、面板Panel.js等这些是必看的； core目次中的Element.js、Ext.js等也是必看的。当需求从一个控件进行扩展的时分，最好能简略看一看这个控件的源代码。
七、了解，熟习，把握Json
　　在项目中，Ext自身的华美表面就很吸引眼球了，但这仅仅是其外在的美，还有最中心的内涵美，即：Json。Json(JavaScript Object Notation) 是一种数据交互花样，一个不克不及完成数据交互功用的项目是没有任何意义的，大多的Ajax框架的数据交互都基于Json，如：jQuery、ExtJs等。因而了解Json把握Json并纯熟运用是很主要的。以当前主流的开拓言语为例，.NET曾经把Json封装到类中，无需装备，直接与数据库交互，轻松的封装直接运用；Java就费事些，必需去下一个Json包，然后再做一些装备，才可以运用；PHP和Java差不多，也必需下载一个Json插件（和类类似），然则不必装备，直接封装运用。在实践的项目中，各自的弃取装备，都基于项目和需求，并不是每个项目（针对WEB）都必然要用到。然则，假如想在项目顶用到此类的Ajax框架，Json的把握又是必需的。