首页 > 代码库 > ExtJS学习笔记2:响应事件、使用AJAX加载数据
ExtJS学习笔记2:响应事件、使用AJAX加载数据
响应事件:
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, target, options){ alert('The Element was clicked!); alert(this.id); }, contextmenu: function(e, target, 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', function(e, target, options){ </span><span style="font-family: Arial, Helvetica, 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) });
ExtJS学习笔记2:响应事件、使用AJAX加载数据
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。