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. [VMWARE] [CENTOS7] 安装VMware-Tools

    安装VM-Tools 先使用yum install 安装Perl与net-tools# sudo yum install net-tools# sudo yum install perl 加载CDRO ...

  2. python第七十六天--堡垒机完成

    堡垒机windows ,linux 都通过测试初始化说明: #进入根目录 1.初始化表结构 #python3 bin/start.py syncdb 2.创建堡垒机用户 #python3 bin/st ...

  3. 对Spring的理解(简单)!

    1.Spring是对j2EE诸多功能进行封装了的一个工具集:它的核心就是提供了一种新的机制来管理业务对象及依赖关系:具体就是控制反转.依赖注入,Aop(面向切面). Spring的底层实现机制是用De ...

  4. JS代码段:返回yyyy-mm-dd hh:mm:ss

    最近做项目的时候正好用到,本着能抄就抄的心态去百度搜索现成的代码, 没想到抄下来的好几个都是错的,要么getMonth没有加1,要么10以下的数字前面没有加0, 我真是日了狗了,这次把写好的正确的直接 ...

  5. SQLServer数据集合的交、并、差集运算

    SQLServer2005通过intersect,union,except和三个关键字对应交.并.差三种集合运算. 他们的对应关系可以参考下面图示 相关测试实例如下: use tempdb go if ...

  6. alsa声卡分析alsa-utils调用过程(二)-tinymixer

    继上一篇文章:http://www.cnblogs.com/linhaostudy/p/8515277.html 三.tinymixer调用分析:(tinymixer.log搜索节点:/dev/snd ...

  7. go time类操作

    fmt.Println(time.Now().Format("2006-01-02 15:04:05")) # 这是个奇葩,必须是这个时间点, 据说是go诞生之日, 记忆方法:6- ...

  8. django —— MVT模型

    转载----

  9. ECstore后台报表显示空白问题解决办法

    执行如下sql语句: INSERT INTO `sdb_ectools_analysis` (`id`, `service`, `interval`, `modify`) VALUES (1, 'b2 ...

  10. android:layout_margin真实含义 及 自己定义复合控件 layout()运行无效的问题解决

    一.关于layout_margin 搞Android时间也不短了.对layout_margin也不陌生了,可近期遇到一个问题让我发现,对它的认识还不够深入全面.大量网络资料上都说,layout_mar ...