ExtJS學習筆記2：響應事件、使用AJAX載入資料

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)});