本文目录一览:
extjs是什么??用来做什么的?麻烦不要复制,通俗点,3Q
extjs 是sencha的一套富客户端的框架,版本差别比较大 2,3和4版本差别大。
4版是采用了mvc的开发思想。extjs可以简单的实现表格,以及form表单组件,它还有一些扩展,有布局管理器,有事件管理器,它同时具有dom操作功能,对拖拽等都进行封装,比如我们要做一个表格 用html要写table tr td 还要写样式,extjs如果想做一个表格 很简单 直接new一个表格对象 GridPanel 就可以,然后在创建这个表格的时候,可以传递这个表格需要的数据就可以,数据与表格的列会有对应的关系。你可以查看extjs提供的例子就知道。当然在他提供的这些组件里面,肯定不可能满足我们的所有需求的,可以对extjs进行组件扩展。他的扩展也很简单。我上家公司就采用了extjs来做后台管理,我们是基于extjs扩展了自己的一套框架,我一直负责维护这个框架,维护了1年多了,扩展了很多组件,所以对这个extjs比较熟悉。
Extjs框架是什么
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怎么自定义函数
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