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)
});
时间: 2024-10-22 00:07:30

ExtJS学习笔记2:响应事件、使用AJAX加载数据的相关文章

滑轮滚动到页面底部ajax加载数据

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧 当然本例子采用的是jquery库,后期会做成原生js.本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height(): 再给windo

[javase学习笔记]-7.4 构造函数的内存加载

这一节我们来说说构造函数在内存中是如何被加载的. 我们之前说过,构造函数只有创建对象时才会被调用并且只调用一次.那么在创建对象的过程中内存中的变化是什么样的呢? 我们接着上一节的Person类,我们分析 class Person { private String name; private int age; Person()//构造函数,分别为成员变量name和age赋固定的值 { name = "baby"; age = 1; System.out.println("per

Ajax 加载数据 练习

查询表的显示,查询显示如果不嵌入PHP代码的话,用ajax怎么实现?   <h1>显示数据</h1> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td>代号</td> <td>姓名</td> <td>性别</td>

Ajax加载数据的使用

需求就是不能再进入页面时加载数据,只能在点击其中一个按钮时把数据加载呈现出来.具体效果如最下面的图. 1.前台页面 1 <h1 class="title" id="001" name="001" onclick="GetData(1)"> 2 概述 <span class="title_icon"></h1> 3 <div class="mc_list&q

利用Ajax加载数据

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

【ALB学习笔记】基于事件触发方式的串行通信接口数据接收案例

基于事件触发方式的串行通信接口数据接收案例 广东职业技术学院  欧浩源 1.案例背景 之前写过一篇<基于多线程方式的串行通信接口数据接收案例>的博文,讨论了采用轮询方式接收串口数据的情况.经过使用了多线程来处理,而然轮询的办法比较还是比较笨拙的.我们在实际的项目开发中,更加常用的是基于事件触发的方式,这个方式不但好用,而且灵活,只是使用起来需要更多的一点专业知识.在本博文中,就"传感器模块每隔1秒钟向上位机传送4字节的电压数据帧"的项目,对该方法的设计进行详细的讲述.  

NGUI学习笔记(四):动态加载UI和NGUI事件

动态加载UI 我们进入一个场景后,如果将这个场景所有可能用到的UI都直接放在场景中做好,由于要在进入场景时就部署好所有的UI对象,那么当UI对象较多时会碰到的问题是:1.初始化场景会产生非常明显的卡顿.2.所有UI都在场景中导致占用大量的内存. 所以我们需要对UI组件进行动态加载和销毁,当需要打开指定的UI时,动态的创建出这个UI对象,而当关闭这个UI对象之后,可以对其进行销毁从而释放出内存. 将UI制作成一个预制件 我们可以在场景中制作好一个UI,然后将其保存成一个预制件后从场景中移除,然后我

AngularJS学习笔记(3)——通过Ajax获取JSON数据

通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app="todoApp"> <head> <meta charset="UTF-8"> <title>TO DO List</title> <link href="./bootstrap/css/bootstrap

分页插件,屏幕滚动ajax加载数据渲染页面

<link rel="stylesheet" href="yunsuifang/pc-patients/css/dropload.css" />    <style>       .opacity {            webkit-animation: opacity 0.3s linear;            animation: opacity 0.3s linear;        } @-webkit-keyframes o