Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可。对于Dom的操作,我个人还是比较喜欢用jQuery。当然如果项目中用的是ExtJS框架,也就没必要多引用一个jQuery,Ext Core是ExtJS框架的一个小子集。如果仅仅使用Ext Core的功能,则只需引入builds文件夹下的一个ext-core.js就可以了,无需css等其他文件。

由于浏览器DOM操作的差异,为了实现Web框架的跨浏览器特性,每个JS框架都会构建一个新类来操作DOM,在Ext Core中实现该功能的类就是Ext.Element。Ext.Element类中的方法很多,主要方法大致可归为这么几类:DOM查询和遍历、DOM操作、大小与定位和CSS样式操作。对于这些,我们可以在实际开发用到的时候去查看Ext Core API。为了开发效率,应该对Ext Core的一些常用功能函数做一个大致的了解。下面将分别进行简单介绍。

获取元素

第一种方式是Ext.get方法,它获取html节点并会创建Ext.Element实例:

var el = Ext.get("elId");

使用Ext.get会创建元素实例,并可在后期引用时使用。

另一种方式称为享元模式(Flyweight Design Pattern),是一种省内存的模式。如果是对元素的一次性操作,可使用Ext.fly方法。Ext.fly方法不会创建Ext.Element实例,实际它是利用全局共享的Ext.Element实例进行操作。一般在对元素的某个属性一次性的取值或设值时使用:

Ext.fly("elId").getHeight();

//下面将div1存储起来是无效的。
var div1 = Ext.fly('div1');
Ext.fly('div2').frame();
//下面代码改变的是div2的高度。
div1.setHeight(200);

另外,有一个容易与上面两个方法混淆的是Ext.getCmp方法,该方法用来取得Ext组件。如:

var text = new Ext.form.TextField({
id: "text",
renderTo: Ext.getBody()
});
Ext.getCmp("text").setWidth(200);

Ext的组件是Ext对一个或多个html元素进行封装的集合,组件和元素有着本质的区别。

对于Ext容器组件(如Ext.Toolbar、Ext.form.FormPanel等)必须通过Ext.getCmp()获取。但对于非容器组件,可以根据Ext组件Id通过Ext.get和Ext.fly获取该组件对应的Ext.Element实例。如:

var text = new Ext.form.TextField({
id: "text",
renderTo: Ext.getBody()
});
Ext.fly("text").setWidth(200);

虽然能通过fly或get获取到Ext组件对于的Ext.Element实例,但显然这实例不具有Ext组件的功能,比如上面代码Ext.fly("text")不能调用setValue()方法。关于Ext组件,我会在后续文章中对其进行专门的讲解。

上面三种获取元素的方法,不管是Ext组件编程还是DOM编程,都会经常用到。

还有一种Ext.getDom,它是用来获得普通dom元素的,也是将Ext.Element转换为普通dom元素的一种方式。它的参数可以是元素id,也可以是Ext.Element对象。

var div = Ext.get('div1');
var el = Ext.getDom('div1');
var el = Ext.getDom(div);

操作DOM和CSS

Ext.Element的查询和遍历方法不多,下面简要介绍几个方法,了解一下即可。

is:判断当前元素是否与选择器选择的元素匹配。

if (Ext.get('test').is('div.cls')) {
alert("test is div.cls");
}

findParent:从当前节点开始查找与选择器匹配的父节点(包含当前节点)。要注意该方法默认返回的是HTMLElement对象,不是Ext.Element对象。如果需要返回Ext.Element对象,则需要设置第3个参数为true。

//返回HTMLElement
var el = Ext.fly('elId').findParent('div');
//定位到在当前节点的第4层父节点
var el = Ext.fly('elId').findParent('div', 4);
//返回Ext.Element
var el = Ext.fly('elId').findParent('div', null, true);

up:是findParentNode方法的缩写,不过该方法返回的是Ext.Element对象。

select:通过选择器选择当前节点下的子节点,该方法的返回值是Ext.CompositeElement对象。

Ext.fly('elId').select('div');
//如果希望返回的节点是Ext.Element对象,需要设置第2个参数为true
Ext.fly('elId').select('div',true);

注意,Ext.CompositeElement对象是不允许直接通过索引访问其内部元素的,要访问内部元素需要使用item方法。注意,是item方法,不是属性,要使用括号(而不是中括号)包含索引,要遍历对象中的元素可使用each方法。通过getCount方法可获取元素的总数。要定位元素可使用indexOf方法。

query:通过选择器选择DOM节点,该方法返回包含DOM节点的数组。

Ext.fly('elId').query('div');
// 上面这句也可以使用以下语句代替
Ext.query('div', Ext.getDom('elId'));

child:通过选择器返回一个当前节点的子节点,默认返回的是Ext.Element对象,如果需要返回HTMLElement对象,第2个参数需要设置为true。

Ext.fly('elId').child('div'); //返回Ext.Element对象
Ext.fly('elId').child('div',true); //返回HTMLElement对象

down:通过选择返回一个当前节点的直接子节点,该方法与child方法类似,唯一不同的是,选择器不能包含节点id,其使用方法可参考child方法。

parent:返回当前节点的父节点。该方法通过设置第 2 个参数可控制返回的是Ext.Element对象还是HTMLElement对象。

Ext.fly('elId').parent(); //返回Ext.Element对象
Ext.fly('elId').parent('',true); //返回HTMLElement对象
//也可以通过选择器选择
Ext.fly('elId').parent('div');

另外还有 next、prev、first、last等方法,具体可以查看Ext Core API文档。

Ext.Element提供操作CSS样式很方便,来看几个常用的方法。

addClass:为元素增加样式类。

//只增加一个样式类
Ext.fly('elId').addClass('cls1');
//增加多个样式类
Ext.fly('elId').addClass(['cls1', 'cls2',..., 'clsN']);

toggleClass:样式类开关。如果element已存在某个样式类,执行该方法将移除该样式类;如果不存在,则增加该样式类。

Ext.fly('elId').toggleClass('elCss');

setStyle:设置样式属性。

//只设置一个属性
Ext.fly('elId').setStyle('color', '#FFFFFF');
//设置多个属性
Ext.fly('elId').setStyle({
color: 'red',
background: 'yellow',
font-weight: 'bold'
})

其它方法,有hasClass、replaceClass、getStyle、getColor等,用起来都很简单,就不一一介绍了。

Ext.DomHelper操作DOM

Ext.DomHelper是一个用来生成HTML片段的类,它主要通过定义一个JSON格式的数据生成HTML片段,对开发人员来说,非常灵活方便。它的数据结构主要包括以下4个属性:

tag:元素的标签,例如div、span之类。

children:由元素的子元素组成的数组,可以通过该属性不断增加子元素。

cls:元素的CSS类名。

html:元素的innerHTML属性,如果不想使用children属性定义元素的内部HTML内容,可使用该属性代替。

来看一个示例:

//JSON格式的数据
//也可以将下面的children属性替换成 html: '<li>1</li><li>2</li><li>3</li>'
var list = {
id: 'itemList',
tag: 'ul',
cls: 'list',
children: [
{ tag: 'li', html: '1' },
{ tag: 'li', html: '2' },
{ tag: 'li', html: '3' }
]
};
var a = {
id: 'link1',
tag: 'a',
href: 'url',
target: '_blank',
html: '链接'
}
//生成代码片段,将ul标签添加到body标签内
Ext.DomHelper.append(Ext.getBody(), list);
//在ul标签后插入a标签
Ext.DomHelper.insertAfter('itemList', a);

上面代码会生成下面这样一段html代码片段:

<ul id='itemList' class='list'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<a target='_blank' href='url' id='link1'>链接</a>

使用Ext.DomHelper的优点是代码简单明了、容易维护。Ext.DomHelper操作DOM的方法还有appendChild、appendTo、insertBefore、insertFirst等,这些方法的意义与jQuery中操作Dom的方法是一样的。

尺寸与大小

对于某个元素在页面上的位置和元素尺寸大小的操作,Ext Core也封装了很多方法,用起来也很方便。这些没什么好介绍的,直接看例子吧。

尺寸大小:

//以默认的动画设置元素高度
Ext.fly('elId').setHeight(200, true);
//以自定义动画设置元素的高度
Ext.fly('elId').setHeight(200, {
duration: 0.5, //持续半秒
//动画过后做一些操作
callback: function () { this.update("结束"); }
}); //得到某个元素的高度
var height = Ext.fly('elId').getWidth();

还有一些方法,如getPadding、getBorderWidth等极少用的方法。

定位的设置和取值方法和尺寸设置取值基本一样:

Ext.fly('elId').setX(200, {
duration: 0.5, //持续半秒
//动画过后做一些操作
callback: function () { this.update("结束"); }
});

和定位有关的方法还有getX、getY、getXY、getTop、getLeft等等。具体可查看Ext Core API

结束语

其实真正用ExtJS框架开发B/S应用的时候,很少会对Dom进行直接操作。ExtJS是基于组件的,本身有着强大的布局功能。比如要做一个弹出的登录界面,一个Window组件几个TextField组件再加两个按钮组件就做好了,而且画面风格统一,整齐美观,基本上不需要用到Div+CSS布局,也不会在一个Ext容器组件中加个html元素如<input type='button'/>。也就是说,实际应用中,Ext Core中的大部分功能不会和Ext组件混合使用。

但如果选择了ExtJS框架开发B/S应用,还是有必要了解和学习一下ExtJS框架的Ext Core部分的。

参考:

《Ext JS 高级编程》
《Ext Core 手册》
http://docs.sencha.com/core/

ExtJS初探:了解 Ext Core的更多相关文章

  1. ExtJS初接触 —— 了解 Ext Core

    ExtJS初接触 —— 了解 Ext Core Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS ...

  2. ExtJs之Ext.core.DomQuery

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  3. ExtJs之Ext.core.DomHelper.append

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  4. ExtJs 中的ext.date

    获取当前日期直接用NEW date() Ext.Date英文API http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Date Ext.Date是一个单例类,封 ...

  5. Ext.core.DomQuery Dom选择器

    Ext.dom.Query Element Selectors:(元素选择器) Ext.core.DomQuery.select('表达式')   返回HTMLElement[] * any elem ...

  6. ExtJs之Ext.core.Element

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  7. Extjs 学习总结-Ext.define自定义类

    本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define).数据模型.代理等.本节介绍使用Ext.define自定义类 使用Ext.define自定义类 1. 首先看看js中自 ...

  8. Extjs 更新数据集Ext.PagingToolbar的start参数重置的处理

    问题:当翻页后,比如当前是第二页,start参数此时是5(初始为0),当切换左侧分类时,我们期望的是从所选分类下明细记录的第一条开始显示,结果发现不是这样,依然是从新数据的第二页开始显示,就是说ext ...

  9. ExtJS学习(一)Ext自定义类实现

    工作中项目需要extjs,所以学习一下,做个笔记防止遗忘了.以后回忆起来也方便. 首先下载extjs官网地址:http://extjs.org.cn/ 下载以后的目录结构: 先写一个入门的程序吧自定义 ...

随机推荐

  1. 查看python版本

    1.未进入python shell python --version 2.进入python shell,有两种方法 (1) help() (2) import sys sys.version

  2. VisualStudio编译项目时,提示bin目录和obj目录下的文件不能写的错误处理的解决办法

    具体错误信息如下: Error 139 Could not write lines to file "obj\Debug\SanSuiWeb.csproj.FileListAbsolute. ...

  3. element-ui的回调函数Events的用法

    做轮播的时候想用这个change回调函数,但是官方文档上竟然就只列了这么一行东西,完全没有示例代码(也可能我没找到哈) 鼓捣了半天,东拼西凑终于找到了靠谱的使用方法,其实很简单 在轮播组件上加上@ch ...

  4. [cb]SceneView 获取鼠标位置

    扩展需求 在Scene视图中获取鼠标的位置 Demo 在Scene视图中,当鼠标点击时实例化一个Cube 重点部分 实现代码 using UnityEngine; using UnityEditor; ...

  5. JMeter乱码常见的解决方案

    方法一.直接将JMeter中http请求中Content encoding改为utf-8 方法二.编辑JMeter安装目录:apache-jmeter-3.2\bin中的jmeter.properti ...

  6. sql2008和sql2012混合安装后打开SQL Server 配置管理器查看出现“远程过程调用失败”0x800706be

    sql2008和sql2012混合安装后打开SQL Server 配置管理器SQL Server服务出现“远程过程调用失败”0x800706be 网上很多人都说这个解决方案,通过卸载“Microsof ...

  7. ccf--20150903--模板生成系统

    本题思路:首先,使用一个map来存储所有需要替换的关键词,然后,再逐行的替换掉其中的关键词,记住,find每次的其实位置不一样,否则会出现递归生成没有出现关键词就清空掉.最后输出. 题目和代码如下: ...

  8. ccf题库中2016年4月2日俄罗斯方块问题

    题目如下: 问题描述 俄罗斯方块是俄罗斯人阿列克谢·帕基特诺夫发明的一款休闲游戏. 游戏在一个15行10列的方格图上进行,方格图上的每一个格子可能已经放置了方块,或者没有放置方块.每一轮,都会有一个新 ...

  9. Java计模模式之六 ----- 组合模式和过滤器模式

    前言 在上一篇中我们学习了结构型模式的外观模式和装饰器模式.本篇则来学习下组合模式和过滤器模式. 组合模式 简介 组合模式是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来 ...

  10. node爬虫扒小说

    Step 1:  万年不变的初始化项目,安装依赖 cnpm i express cheerio superagent superagent-charset async -S express 就不用多说 ...