`

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

 

 

 

 

  • 大小: 8 KB
  • 大小: 26.5 KB
分享到:
评论

相关推荐

    ExtJS笔记---Grid实现后台分页

    以上是ExtJS Grid实现后台分页的基础步骤和关键概念。实际应用中,可能还需要处理更多的细节,如错误处理、动态加载列等。对于初学者来说,理解这些核心概念并结合具体的代码示例进行实践,能有效提升ExtJS开发能力...

    ExtJs学习笔记,共30讲

    这个学习笔记涵盖了从基础到高级的多个主题,帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明: 1. **ExtJs 结构树**:这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树,包括...

    Extjs3.4+Ext-core.pdf+轻松搞定Extjs.pdf

    本资源包包含了与ExtJS 3.4相关的学习资料,包括`Ext-core.pdf`、`轻松搞定Extjs.pdf`以及`Extjs学习笔记.docx`,旨在帮助初学者或有经验的开发者更好地理解和掌握ExtJS 3.4。 `Ext-core.pdf` 是关于Ext Core的文档...

    老师整理的extjs学习笔记

    ### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...

    EXT学习笔记-项目应用实践

    这篇EXT学习笔记主要涵盖了EXTJS中面向对象编程的一些关键概念和实践,包括命名空间、类定义、构造函数、属性与方法的访问控制(私有和公有)、静态属性与方法以及继承机制。 1. **命名空间**:在EXTJS中,命名空间...

    extJs+2.1学习笔记.pdf

    本学习笔记将深入探讨ExtJS 2.1的关键概念和技术,帮助读者掌握这个框架的核心要素。 1. **ExtJs 结构树** 在ExtJS中,应用程序通常基于组件树构建,每个组件都有自己的属性、方法和事件。理解这种结构对于布局...

    Extjs学习笔记之九 数据模型(上)

    ### Extjs 学习笔记之九:数据模型(上) #### 概述 本文将深入探讨Extjs框架中至关重要的组成部分——数据模型。数据模型在Extjs中扮演着核心角色,它不仅为开发者提供了强大的数据处理能力,还极大地简化了前端与...

    extJs 2.1学习笔记

    【ExtJs 2.1学习笔记】主要涵盖了ExtJs框架的核心概念、组件使用以及数据通信等方面的知识点。以下是对这些内容的详细解析: 1. **ExtJs 结构树**:这部分内容介绍了ExtJs的组件层次结构,包括如何组织和嵌套组件,...

    extjs学习笔记

    ### extjs学习笔记知识点梳理 #### 一、Ext.MessageBox 方法详解 Ext.MessageBox 是 ExtJS 库中的一个重要组件,用于向用户展示消息对话框。它包含了多种类型的消息对话框,每种对话框都有其特定用途。 - **Ext....

    网页设计笔记--整理给初学者的笔记

    * 基础概念->图片设计/代码测试->案例学习->组合案例->接单练技能 七、学习方法: * 基础概念 * 图片设计/代码测试 * 案例学习 * 组合案例 * 接单练技能 八、学习逻辑: * 掌握技能、技巧 * 从整体的理论架构到...

    extjs 学习笔记(一) 一些基础知识

    以上知识点涵盖了ExtJS学习笔记中的核心内容,通过这些知识点的学习和实践,开发者能够入门并逐渐深入理解ExtJS框架,并将这些知识应用到实际的开发工作中去。对于希望深入学习ExtJS的开发者来说,理解这些基础知识...

    extjs学习网页学习资料

    在"extjs学习网页学习资料"中,我们可以深入学习EXTJS的核心概念和技术。文档阅读部分可能包含EXTJS的官方文档,这些文档通常会详细解释EXTJS的各种组件、API和设计模式。通过阅读这些文档,开发者可以理解EXTJS的...

    ExtJs + api + 笔记 + 完整包

    本资源包含ExtJs的API文档、笔记以及示例,帮助开发者深入理解和使用ExtJs。 首先,API文档是ExtJs开发的基础,其中包括ExtJs3.2和3.1-3.3的中文版本。这些CHM文件提供了详细的类、方法和事件的参考,有助于开发者...

    ExtJS使用笔记

    ExtJS是一个开源的JavaScript库,主要用于...通过本笔记的学习,可以掌握ExtJS在前端开发中的应用,理解各个组件和管理器的使用方法,以及一些针对特定浏览器的布局技巧,为创建美观、高效的用户界面打下坚实的基础。

    Extjs学习笔记之八 继承和事件基础

    在深入探讨ExtJS的继承和事件基础之前,让我们先了解一些基本概念。JavaScript是一种基于原型的面向对象语言,这意味着对象可以...通过深入学习这些概念,开发者可以更好地掌握ExtJS框架,创建出功能丰富的用户界面。

    ExtJS4.0 MVC 学习资料集合

    这是一份全面的学习指南,系统地介绍了ExtJS4.0的基础概念和API。从基础的组件使用,如按钮、表格、面板,到高级特性,如数据网格、图表、树形结构,都有深入的讲解。同时,该指南也会介绍如何在MVC模式下组织代码,...

Global site tag (gtag.js) - Google Analytics