首页 > Web开发 > 详细

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

时间:2014-07-20 22:18:13      阅读:390      评论:0      收藏:0      [点我收藏+]

响应事件:

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加载数据

原文:http://blog.csdn.net/litdwg/article/details/37994565

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!