Blur on a Form/FormPanel

[nl65]

I would like to warn the user upon leaving a form without saving the changes.
So, I try to detect a blur from a form, however the event does not fire.
Perhaps other idea how to achieve it ?


Ext.define('MyApp.view.MyViewport', { extend: 'Ext.container.Viewport',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
activeTab: 0,
items: [
{
xtype: 'panel',
title: 'Test Form',
items: [
{
xtype: 'form',
layout: {
type: 'auto'
},
bodyPadding: 10,
title: 'Form1',
pollForChanges: true,
items: [
{
xtype: 'textfield',
value: 'Original Text',
fieldLabel: 'Change Me'
},
{
xtype: 'button',
text: 'Save'
}
],
listeners: {
blur: {
fn: me.onFormBlur,
scope: me
}
}
}
]
},
{
xtype: 'panel',
title: 'Some Other Form',
tabConfig: {
xtype: 'tab',
width: 127
},
items: [
{
xtype: 'form',
bodyPadding: 10,
title: 'Form2',
items: [
{
xtype: 'textfield',
fieldLabel: 'Change Me Too'
}
]
}
]
}
]
}
]
});


me.callParent(arguments);
},


onFormBlur: function(abstractcomponent, e, options) {
alert('onFormBlur');


}


});.

[sword-it]

Hi nl65,

Use "deactivate" event, this event fired when form component visually deactivated.


Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
title:'Test',
renderTo: document.body,
items: [{
title: 'Form',
xtype: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
},
{
xtype: 'combo',
fieldLabel: 'Age',
store: ['15', '25', '35']}],
listeners: {
deactivate: function() {
alert('hello');
}
}},
{
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}}]
});

For more info read API docs - http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Panel-event-deactivate

[nl65]

"deactivate" does not fire as well - note I'm using Architect project.