Ext Core 3.0 Beta Released

4月4日,ExtJs团队发布了Ext Core 3.0 Beta版,它是即将发布的ExtJs 3.0的一个分支,基于MIT License版权。

一、Ext Core主要功能

Ext Core采用面向对象的方式设计,便于提高代码的简洁及复用。对以下各种操作提供了跨浏览器支持:
* DOM manipulation and traversal
* CSS management
* Event handling
* Dimensions and Sizing
* AJAX and JSON Support
* Animations
除此之外还包括其它一些常用功能:
* Classical Inheritance Class System
* Observable Class
* Markup generation and Templating
* Timed code execution
* URL encoding and decoding

二、Ext Core尺寸

Ext Core 3.0 Beta版的主文件ext-core.js压缩后有75K,经过压缩和gzip处理,最小可以达到25k。相对jQuery 1.3.2的19k来说还是比较大。

据官方Blog的描述,Ext Core 3.0的设计目标是包含于动态网页或开发小的应用。直接竞争对手就是jQuery。有意思的是jQuery目前的定位是”瑞士军刀”,提供强大的Dom操作功能,并通过丰富插件来扩展jQuery的功能,是从小往大。而ExtJs是先推出大而全的解决方案:ExtJS,然后再推出精简版:Ext Core,试图通杀”胖应用”和”瘦应用”两个场合。

应该说ExtJs的这个方向是非常正确的,毕竟使用ExtJs的场合有限,人们在羡慕ExtJs华丽的界面时,也会因它的速度而望而却步。Ext Core的适时推出,可以拉拢一部分用户,占领更多的市场,扩大ExtJs的影响力,当然实际效果还有待用户来检验。

三、Ext Core 手册

可以从这里浏览:Ext Core 手册

四、Ext Core 演示

Ext Core 3.0的下载包中包括了几个常见的例子,包括标签菜单jsonp调用幻灯片、lightbox效果及前几项的组合使用,效果非常棒。例子中的代码沿用与ExtJs一致的OO方式编码,推荐大家学习。

五、DomQuery和CompositeElementLite
DomQuery提供高性能的对象选择器。它支持大多数CSS3选择器的规格,以及少数自定义选择器和基本的XPath 。使用CompositeElementLite可以批量操作多个对象。比如下面的例子:

// selects a collection of elements and adds the class 'myCls' to each one.
Ext.select('div:has(> span.someClass)').addClass('myCls');

六、事件处理更容量

Ext Core提供抽象的跨浏览器的处理机制,并支持自定义事件。最重要的是,它支持多种配置选项(delaying, buffering, delegating, and targeting events)。比如下面的例子:

Ext.fly('elId').on('click', function(e, t){
    // e is normalized cross browser event object
    // t is the target element

    // Update contents of the element with id "log" to notify the user of the event firing
    Ext.fly('log').update('You clicked on the element with id: ' + t.id);
});

七、AJAX请求

Ext Core提供简洁的跨浏览器的AJAX调用。比如下面的例子:

Ext.Ajax.request({
    url: 'serverSide.php',
    success : function(r){
        // using the built-in Ext JSON support
        var data = Ext.decode(r.responseText);

        // data is now a regular Javascript object
        console.log(data.items[0].title);
    }
});

如果只是要更新页面中的内容,可以使用快捷方式:

Ext.fly('elId').load({
    url: 'serverSide.php'
});

以上是有关Ext Core的一些基本情况,可以看出ExtJs的野心不只局限于”胖应用”,通过Ext Core也向”瘦应用”开始进军,希望ExtJs能给我们带来更多的惊喜!

发表评论

电子邮件地址不会被公开。 必填项已用*标注