ExtJS study NOTE 2: respond to events and load data using AJAX

ExtJS study NOTE 2: respond to events and load data using AJAX

RESPONSE event:

1. Set an html Tag

Ext JS 4 Cookbook

2. Use the get function to obtain the tag object

var el = Ext.get('my-div');

3. Bind the response function to the event of the object.

el.on('click', function(e, target, options){alert('The Element was clicked!');alert(this.id);}, this);

4. You can bind multiple events at a time.

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. You can also use listeners in configuration to configure attributes when creating an extjs object.

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. You can also bind the Event Response to the sub-object through proxy.

var whatsNewEl = Ext.get('whats-new');whatsNewEl.on('click', function(e, target, options){alert(target.innerHTML);

}, this, {delegate: 'li'});

Load data using AJAX

Ext.Ajax.request({url: 'url',

Params :{}, // parameter success: function (response, options) {// processing after data is obtained successfully}, failure: function (response, options) {// Failed}, callback: function (options, success, response) {// callback function}, timeout: 60000 // 60 seconds (default is 30 )});