ExtJS框架分层
Ext Fundation层负责创建Ext实例,部分工具实例和类系统。通过类系统我们可以扩展类,覆盖方法和属性,向类添加mixins和configurations,以及一些其他的事情。
注:在开发中应该使用ext-all-dev.js,它比ext-all-debug.js提供了更多的调试信息。
ExtJS的类系统
Ext.define
该方法在内部调用类管理器的create方法创建一个新的类,也可以用来覆盖已存在的类的方法和属性;
Ext.create
该方法是类管理器内部的instantiate方法的别名,可以通过此方法为已定义的类创建实例;
Ext.widget
该方法内部通过类管理器的instantiateByAlias方法根据别名参数构建类的实例
注:1)当使用Ext.define方法定义类时,默认会扩展Ext.Base类。
2)ExtJS中的每一个类实际上是Ext.Class类的一个实例。当调用Ext.define方法定义类时,实际上是创建了一个Ext.Class的实例。
在ExtJS中,创建一个类时,其内部处理过程包括一些前置处理为创建类做准备,也包括一些类创建后的后置处理,如下图所示:
前置处理包括:
- className定义这个类的名称空间和名字;
- loader 查找类的依赖,如果这些依赖不存在则尝试加载它们;
- extend 在新类中添加从父类中继承的所有方法和属性;
- statics 为当前类定义添加统计分析相关的方法和属性;
- inheritableStatics 此阶段添加来自父类的统计方法及属性(如果存在);
- config 为配置项创建get和set方法;
- mixins 继承所有mixin类的方法和属性;
- xtype 为新类定义xtype;
- alias 为新类定义别名;
后置处理包括:
- alias 将新类的别名注册到类管理器;
- singleton 为新类创建一个单例实例;
- alternateClassName 为创建的新类定义其它的名称;
- uses 导入新类所使用的所有其它类;
ExtJS操作DOM
Ext.Element
ExtJS通过Ext.Element类来封装DOM节点,并提供了各种方法来操作节点。
var div = Ext.Element.get("main");
等同于
div = Ext.get("main");
Ext.DomQuery
ExtJS通过Ext.DomQuery方法在DOM树中查找节点,查找方式遵循CSS3选择器规范和基本的XPath规范。
varlis = Ext.DomQuery.select("#main .menu ulli");//Step 1 lis = Ext.get(lis); //Step 2
第2步将第一步返回的结果封装成一个Ext.CompositeElementLite集合,通过这个集合可以像Ext.Element类提供的API那样同时修改所有节点。
上面的代码等同于:
var h1 = Ext.select("#main div[class=content] h1"); h1.setStyle("color","#003399");
Ext.DomHelper
该工具类提供了方法用于创建DOM节点和HTML片段。
Ext.DomHelper.append(Ext.getBody(),{ tag : "div", style : { width : "100px", height : "100px", border : "2px solid #333", margin : "20px auto" } });
var h1 = Ext.DomHelper.createDom({ tag : "h1", html : "This is the title!" });
删除节点
Ext.fly(h1).remove();
Ext.fly方法类似于Ext.get方法,它返回一个Ext.Element对象指向查找到的节点。
相关推荐
语言程序设计资料:ExtJs学习笔记-2积分.doc
对爱好extjs的开发者有帮助,提供中文api文档,及常用的方法!
extjs-theme-bootstrap-master.zip
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
NULL 博文链接:https://lucky16.iteye.com/blog/1522254
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
NULL 博文链接:https://lucky16.iteye.com/blog/1490278
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经达到1MB的ext-all.js了,本文介绍如何在EXTJS4...
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJS----HelloWorld程序源码
EXTJS4 类似于bootstrap的主题
ExtJS快速入门--传智播客--蔡世友
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分
Extjs4---grid的修改、删除功能---结合struts2、hibernate
Extjs4---combobox省市区三级联动+struts2
ExtJs学习笔记,共30讲 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 ...
Extjs 5 学习笔记,在网上下载整理好的。
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa