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载入数据的更多相关文章
- iOS学习笔记之触摸事件&UIResponder
iOS学习笔记之触摸事件&UIResponder 触摸事件 与触摸事件相关的四个方法如下: 一根手指或多根手指触摸屏幕 -(void)touchesBegan:(NSSet *)touches ...
- 【Spring学习笔记-MVC-3.1】SpringMVC返回Json数据-方式1-扩展
<Spring学习笔记-MVC>系列文章,讲解返回json数据的文章共有3篇,分别为: [Spring学习笔记-MVC-3]SpringMVC返回Json数据-方式1:http://www ...
- EF学习笔记(八):更新关联数据
学习笔记主目录链接:ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 上一篇链接:EF学习笔记(七):读取关联数据 本篇原文链接:Updating Related Data 本篇主要考 ...
- 【EF6学习笔记】(八)更新关联数据
上一篇链接:EF学习笔记(七):读取关联数据 本篇原文链接:Updating Related Data 本篇主要考虑对于有关联的数据进行新增.删除.更新操作:比如Course .Instructor: ...
- JavaWeb和WebGIS学习笔记(三)——GeoServer 发布shp数据地图
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
- Extjs 学习笔记1
学习笔记 目 录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...
- node学习笔记(二)(ajax方式向node后台提交数据)
通过ajax向node后台提交数据过程(附手写前后台代码),并总结post与get的区别 POST 前台代码 //CSS简单给点样式 <style> form{ width: 200px; ...
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- 【zepto学习笔记03】事件机制
前言 我们今天直接进入事件相关的学习,因为近期可能会改到里面的代码就zepto来说,我认为最重要的就是选择器与事件相关了,随着浏览器升级,选择器简单了,而事件相关仍然是核心,今天我们就来学习学习 ze ...
随机推荐
- C#网络编程技术SuperSocket实战项目演练
一.SuperSocket课程介绍 1.1.本期<C#网络编程技术SuperSocket实战项目演练>课程阿笨给大家带来三个基于SuperSocket通讯组件的实战项目演示实例: ● 基于 ...
- How to update jQuery Mobile in Dreamweaver CS6
来源:http://wpguru.co.uk/2013/01/how-to-update-jquery-mobile-in-dreamweaver-cs6/ Since the release of ...
- C#编程(三十四)----------数组作为参数
原文链接: http://blog.csdn.net/shanyongxu/article/details/46765267 数组作为参数 数组可以作为参数传递给方法,也可以从方法中返回.要返回一个数 ...
- ASP.NET MVC:@helper 不能调试
ASP.NET MVC 的 @helper 不能设置断点,当然我们可以将逻辑移动到扩展方法中,这里介绍另外一种方式,使用:System.Diagnostics.Debug.WriteLine,编程旅途 ...
- java List转换为字符串并加入分隔符的一些方法总结
方法一: public String listToString(List list, char separator) { StringBuilder sb = new StringBuilder(); ...
- 丑闻第三季 /全集Scandal迅雷下载
丑闻 第三季 Scandal Season 3 (2013)本季看点:在经典美剧<老友记第一季>中饰演菲比的女星莉莎·库卓,即将加盟描写华府危机公关的ABC剧集<丑闻>(Sca ...
- ntp测试
cmd下 w32tm /stripchart /computer:time1.aliyun.com linux ntpdate ntp1.aliyun.com
- .NetCore中EFCore for MySql整理
一.MySql官方提供了Ef Core对MySql的支持,但现在还处于预览版 Install-Package MySql.Data.EntityFrameworkCore -Pre Install-P ...
- LaTeX技巧23:BIBTeX制作参考文献
23BibTeX 是一种格式和一个程序,用于协调LaTeX的参考文献处理.BibTeX 使用数据库的的方式来管理参考文献. BibTeX 文件的后缀名为 .bib . 先来看一个例子 @article ...
- [转]CENTOS 使用RSYNC+INOTIFY实现文件实时自动同步
FROM : http://www.qiansw.com/centos-rsync-inotify-file-sync.html 生产环境中的两台web服务器,有个目录需要完全一样.使用rsync和i ...