ExtJS初接触 —— 了解 Ext Core

ExtJS初接触 —— 了解 Ext Core

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, 前端开发

标签: ExtJS