彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 新闻动态 > ExtJS学习笔记2:响应事件、使用AJAX加载数据

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

发布时间:2019-09-02 02:14编辑:新闻动态浏览(113)

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

    响应事件:

    1.设置一个html标记

    Ext JS 4 Cookbook
    

    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');
    whatsNewEl.on('click', function(e, target, options){
    alert(target.innerHTML);
    
    }, 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)
    });
    

    响应事件: 1.设置一个html标记 Ext JS 4 Cookbook 2.使用get函数获取此标记对象 var el = Ext.get(my-div...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html xmlns=";
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="../jquery/jquery-1.11.2.min.js"></script>
    </head>

    <body>
    <h1>显示数据</h1>

    <table width="100%" border="1" cellpadding="0" cellspacing="0">
    <tr>
    <td>代号</td>
    <td>名称</td>
    <td>操作</td>
    </tr>

    <tbody id="tb">

    </tbody>

    </table>

    本文由彩世界平台发布于新闻动态,转载请注明出处:ExtJS学习笔记2:响应事件、使用AJAX加载数据

    关键词:

上一篇:您是哪个等级的CSS开发人员?

下一篇:没有了