PDA

View Full Version : ExtJS event delegation not working



nil5286
1 Jul 2012, 11:31 PM
I am using extjs 4.1 and trying to do the event delegation which in my case is to attach a blur event to all the textfields of my form and it is not working , i don't know where i am going wrong in attaching the event, is it the wrong place where i am putting the code and also i have noticed that as per the docs below link
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Panel-method-on
the delegate property of the options object no longer exists. Below is my code:



Ext.onReady(function () {

var loadForm = function () {
Ext.getCmp('TestForm').getForm().setValues({ name: 'some text', email: 'first', dob: '12/12/2009' });
}


Ext.define('userForm', {
extend: 'Ext.form.Panel'
, alias: 'widget.userform'
, frame: true
, initComponent: function () {


Ext.apply(this, {
title: 'User Form'
, height: 350
, items: [{
xtype: 'textfield'
, fieldLabel: 'Name'
, name: 'name'
, id: 'nameId'
, enableKeyEvents: true
}, {
xtype: 'textfield'
, fieldLabel: 'Email'
, name: 'email'
, id: 'emailId'
}, {
xtype: 'datefield',
fieldLabel: 'DOB',
id: 'dob',
name: 'dob',
format: 'Y-m-d'
}, {
xtype: 'textfield',
fieldLabel: 'Age',
id: 'age',
name: 'age'
}, {
xtype: 'textfield',
fieldLabel: 'Guardian',
id: 'guardian',
name: 'guardian'
}]


});


this.callParent(arguments);
} //eoinitComponent


});


var userForm = Ext.create('userForm', {
renderTo: 'loadPanel',
id: 'TestForm',
listeners: {
afterrender: function (formCmp, eOpts) {
loadForm();
},
render: function (formCmp, eOpts) {
Ext.getCmp("TestForm").on(
'blur',
function (e, t) {
// handle blur
console.info(t.id);
},
this,
{
// filter the target element to be a descendant with the class '.x-form-field'
delegate: '.x-form-field'
}
);
}
}


});


});

Izhaki
2 Jul 2012, 2:29 AM
Already answered at stackoverflow (http://stackoverflow.com/questions/11289555/extjs-4-1-event-delegation-not-working/11291770#11291770).

nil5286
2 Jul 2012, 3:56 AM
Thanks for the answer.