ExtJS学习笔记-基础概念

最新推荐文章于 2024-03-20 17:38:44 发布

原创最新推荐文章于 2024-03-20 17:38:44 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ExtJS4 #基础摘要

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了ExtJS框架的分层结构，重点讲解了ExtFundation层的功能，以及ExtJS的类系统如何工作。文章还讨论了Ext.define、Ext.create、Ext.widget方法的使用，同时阐述了ExtJS操作DOM的相关方法如Ext.Element、Ext.DomQuery、Ext.DomHelper，并展示了如何删除节点。最后，文章提供了关于创建ExtJS类的内部处理过程概述。

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对象指向查找到的节点。