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