ExtJS学习笔记2：响应事件、使用AJAX加载数据

发布时间：2020-12-16 00:28:21 所属栏目：百科来源：网络整理

导读：响应事件： 1.设置一个html标记 div id="my-div"Ext JS 4 Cookbook/div 2.使用get函数获取此标记对象 var el = Ext.get('my-div'); 3.将响应函数和对象的事件绑定 el.on('click',function(e,target,options){alert('The Element was clicked!');alert(this.i

响应事件：

1.设置一个html标记

<div id="my-div">Ext JS 4 Cookbook</div>

2.使用get函数获取此标记对象

var el = Ext.get('my-div');

3.将响应函数和对象的事件绑定

el.on('click',function(e,target,options){
alert('The Element was clicked!');
alert(this.id);
},this);

4.一次也可绑定多个事件

el.on({
click: function(e,options){
alert('The Element was clicked!);
alert(this.id);
},contextmenu: function(e,options){
alert('The Element was right-clicked!');
alert(this.id);
},scope: this
});

5.也可在创建extjs对象时，在配置中使用listeners配置属性设置

Ext.create('Ext.panel.Panel',{
title: 'Ext JS 4 Cookbook',html: 'An Example Panel!',renderTo: Ext.getBody(),width: 500,listeners: {
afterrender: function(){
alert('The Panel is rendered!');
},scope: this
}
});

6.也可以通过代理的方式，将事件响应绑定到子对象中

var whatsNewEl = Ext.get('whats-new');
<span style="font-family: Arial,Helvetica,sans-serif;">whatsNewEl.on('click',options){
</span><span style="font-family: Arial,sans-serif;">alert(target.innerHTML);</span>

},this,{
delegate: 'li'
});

使用AJAX加载数据

Ext.Ajax.request({
url: 'url',

params:{},//参数
success: function(response,options){
//成功获取数据后的处理
},failure: function(response,options){
//失败
},callback: function(options,success,response){
//回调函数
},timeout: 60000 //60 seconds (default is 30)
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!