extjs 四 学习小结3
日期：2014-05-16 浏览次数：20391 次
extjs 4 学习小结3
继续其读书笔记
1 ext js事件绑定方式
var button = Ext.get('btn');
button.addListener('click',hello1);//绑定事件处理函数
button.addListener('click',hello2);
可以支持多事件绑定，执行顺序固定，支持延迟调用等优点
2 自定义事件
//创建Person类
var Person = Ext.extend(Ext.util.Observable,{
constructor : function(name){
this.name = name;
this.sayNum = 0;
this.say = function(){
if(this.sayNum < 2){
this.sayNum += 1;
alert('I am '+name);
}else{
this.sayNum = 0;//触发自定义事件后计数器归零
this.fireEvent('onSay',this);//激发自定义事件
}
}
this.addEvents({//加入自定义事件
"onSay" : true
});
}
});
var per = new Person('tom');//创建对象
//为自定义事件绑定处理函数
per.addListener('onSay',function handler(){
alert('发生了自定义事件');
});
</script>
上面点第3次后，触发了自定义事件
3 EXT JS的事件执行过程：添加事件（addevent),拦截事件（capture),激发事件（fireevent)
4 addevents,fireevent,addlistener
//继承自Ext.util.Observable
var Person = Ext.extend(Ext.util.Observable,{
constructor : function(name){
this.name = name;
this.say = function(){
this.fireEvent('onSay',this.name);//激发自定义事件
}
this.addEvents({//加入自定义事件
"onSay" : true
});
}
});
var per = new Person('tom');//创建对象
//为自定义事件绑定处理函数
per.addListener('onSay',function(name){
alert("I'am " + name);
});
</script>
</HEAD>
<BODY>
<input type='button' value='say' onclick='per.say()'>
</BODY>
5 capture例子
//继承自Ext.util.Observable
var Person = Ext.extend(Ext.util.Observable,{
constructor : function(name){
this.name = name;
this.say = function(){
this.fireEvent('onSay',this.name);//激发自定义事件
}
this.addEvents({//加入自定义事件
"onSay" : true
});
}
});
var per = new Person('tom');//创建对象
per.addListener('onSay',handler);//为自定义事件绑定处理函数
function handler(){//事件处理函数
alert('发生了自定义事件');
}
//为per对象添加拦截器
Ext.util.Observable.capture(per,captureFunction);
//拦截函数
function captureFunction(eventName){
if(eventName == 'onSay'){//事件名称是onSay则返回false终止事件的执行
alert("拦截事件：“"+eventName+"”。");
return false;
}
return true;
}
会输出：拦截事件：onsay;
6 addmanagerlistener事件监听器
function createFn(){
alert('新建');
}
function openFn(){
alert('打开');
}
function saveFn(){
alert('保存');
}
Ext.create('Ext.toolbar.Toolbar',{//创建工具栏
renderTo: Ext.getBody(),
bodyPadding: 5,
width:300,
items : [
{text:'新建',id:'createBtn',iconCls:'newIcon'},
{text:'打开',id:'openBtn',iconCls:'openIcon'},
{text:'保存',id:'saveBtn',iconCls:'saveIcon'},
{text:'销毁新建按钮',handler : function(){
//销毁新建按钮
Ext.getCmp('createBtn').destroy();
}}
]
});
var createBtn = Ext.getCmp('createBtn');
createBtn.on('click',createFn);
//以下的事件绑定将受createBtn组件是否销毁的控制，如果createBtn组件销毁
//了则事件绑定同时解除。
createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);
createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);
7 relayevents
继续其读书笔记
1 ext js事件绑定方式
var button = Ext.get('btn');
button.addListener('click',hello1);//绑定事件处理函数
button.addListener('click',hello2);
可以支持多事件绑定，执行顺序固定，支持延迟调用等优点
2 自定义事件
//创建Person类
var Person = Ext.extend(Ext.util.Observable,{
constructor : function(name){
this.name = name;
this.sayNum = 0;
this.say = function(){
if(this.sayNum < 2){
this.sayNum += 1;
alert('I am '+name);
}else{
this.sayNum = 0;//触发自定义事件后计数器归零
this.fireEvent('onSay',this);//激发自定义事件
}
}
this.addEvents({//加入自定义事件
"onSay" : true
});
}
});
var per = new Person('tom');//创建对象
//为自定义事件绑定处理函数
per.addListener('onSay',function handler(){
alert('发生了自定义事件');
});
</script>
上面点第3次后，触发了自定义事件
3 EXT JS的事件执行过程：添加事件（addevent),拦截事件（capture),激发事件（fireevent)
4 addevents,fireevent,addlistener
//继承自Ext.util.Observable
var Person = Ext.extend(Ext.util.Observable,{
constructor : function(name){
this.name = name;
this.say = function(){
this.fireEvent('onSay',this.name);//激发自定义事件
}
this.addEvents({//加入自定义事件
"onSay" : true
});
}
});
var per = new Person('tom');//创建对象
//为自定义事件绑定处理函数
per.addListener('onSay',function(name){
alert("I'am " + name);
});
</script>
</HEAD>
<BODY>
<input type='button' value='say' onclick='per.say()'>
</BODY>
5 capture例子
//继承自Ext.util.Observable
var Person = Ext.extend(Ext.util.Observable,{
constructor : function(name){
this.name = name;
this.say = function(){
this.fireEvent('onSay',this.name);//激发自定义事件
}
this.addEvents({//加入自定义事件
"onSay" : true
});
}
});
var per = new Person('tom');//创建对象
per.addListener('onSay',handler);//为自定义事件绑定处理函数
function handler(){//事件处理函数
alert('发生了自定义事件');
}
//为per对象添加拦截器
Ext.util.Observable.capture(per,captureFunction);
//拦截函数
function captureFunction(eventName){
if(eventName == 'onSay'){//事件名称是onSay则返回false终止事件的执行
alert("拦截事件：“"+eventName+"”。");
return false;
}
return true;
}
会输出：拦截事件：onsay;
6 addmanagerlistener事件监听器
function createFn(){
alert('新建');
}
function openFn(){
alert('打开');
}
function saveFn(){
alert('保存');
}
Ext.create('Ext.toolbar.Toolbar',{//创建工具栏
renderTo: Ext.getBody(),
bodyPadding: 5,
width:300,
items : [
{text:'新建',id:'createBtn',iconCls:'newIcon'},
{text:'打开',id:'openBtn',iconCls:'openIcon'},
{text:'保存',id:'saveBtn',iconCls:'saveIcon'},
{text:'销毁新建按钮',handler : function(){
//销毁新建按钮
Ext.getCmp('createBtn').destroy();
}}
]
});
var createBtn = Ext.getCmp('createBtn');
createBtn.on('click',createFn);
//以下的事件绑定将受createBtn组件是否销毁的控制，如果createBtn组件销毁
//了则事件绑定同时解除。
createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);
createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);
7 relayevents
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
