extjs的作用

JavaScript06

extjs的作用,第1张

extjs主要功能:

1、网格

大型数据页面的无限/缓冲滚动功能得到很大改进。同时,对于网格的“锁定”功能,新增了锁定和未锁定两种状态。

2、布局

在布局上,通过避免浏览器回流来加快访问速度(浏览器回流,指浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程)。同时,新增了“边界”布局方式。收缩包围的宽度问题,以前是用特定组件来处理,现在改为用核心组件来处理。

3、核心组件

XTemplates和方法重写功能得到显著改善。Ext.override现在开始支持重写实例方法,并且,可以通过使用标准的callParent函数来访问被重写的方法。

此外,4.1版本开始支持通过使用函数名来实现事件监听器。

ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

ExtJs最开始基于YUI技术,由开发人员JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。

Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者,并为开发者屏蔽了大量跨浏览器方面的处理。相对来说,EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

extjs的自定义事件主要分三步

1.在类中定义事件名称:

Person = function(config) {

Person.superclass.constructor.call(this, config)

this.name = config.name || ''

this.sex = config.sex || ''

this.addEvents({

"nameChange": true,

"sexChange": true

})

}

2.实例化对象,并在该对象中定义事件的监听函数

var person = new Person({

name: 'binoruv',

sex: 'man'

})

person.on("nameChange", function() { alert("Name has been changed to " + this.name)})

person.on("sexChange", function() { alert("Sex has been changed to " + this.sex)})

3.触发事件

Ext.extend(Person, Ext.util.Observable, {

//extend函数中可以自定义新的方法,也可以重写原类的方法

setName: function(_name) {

if (this.name != _name) {

this.name = _name

this.fireEvent("nameChange", this)

}

},

setSex: function(_sex) {

if (this.sex != _sex) {

this.sex = _sex

this.fireEvent("sexChange", this)

}

}

})

person.setName("binoruv")

person.setSex("woman")

整个代码如下:

<script type="text/javascript">

Person = function(config) {

/*

此处addEvents是调用Person父类Ext.util.Observable的方法

api中对Observable的描述:一个抽象基类(Abstract base class),为事件

机制的管理提供一个公共接口。子类应有一个"events"属性来

定义所有的事件。

*/

Person.superclass.constructor.call(this, config)

this.name = config.name || ''

this.sex = config.sex || ''

this.addEvents({

"nameChange": true,

"sexChange": true

})

}

Ext.extend(Person, Ext.util.Observable, {

setName : function(_name) {

if (this.name != _name) {

this.name = _name

this.fireEvent("nameChange", this)

}

},

setSex : function(_sex) {

if (this.sex != _sex) {

this.sex = _sex

this.fireEvent("sexChange", this)

}

}

})

Ext.onReady(function() {

var person = new Person({

name: 'binoruv',

sex: 'Man'

})

person.on("nameChange", function() { /*debugger*/Ext.Msg.alert("Message","Name has been changed to " + this.name)})

person.on("sexChange", function() { /*debugger*/Ext.Msg.alert("Message", "Sex has been changed to " + this.sex)})

person.setName("binoruv")

person.setSex("Woman")

})

</script>