View Full Version : 4.1 Form panel blur question

11 Apr 2013, 6:32 PM

I have a form panel:
Ext.define('epAdmin.view.vActionsClientTask', {
extend : 'Ext.form.Panel',
alias : 'widget.vActionsClientTask',

I have listeners in my controller for focus and blur. I have enabled the Ext.FocusManager. The events fire when I click on the panel bodythen click elsewhere. All fine.

However, when I click on a field on the form, then click elsewhere, these events don't fire at the panel level. What I am trying to achieve is that when a user changes the data on a form, then clicks off (ie clicks another component) I want to be able to check for whether the form is dirty then send the changes to the server if required. I could put blur or change events on each field but then I would need to send data to the server for each field. I could watch dirtychange event but that will also mean I need to save changes as soon as they happen.

What is the best way to achieve this please? ie when a user clicks off a form panel after doing data entry I can check if it is dirty and take appropriate action.


13 Apr 2013, 11:59 AM
You could listen to the componentfocus event and use the previousCmp parameter to your advantage.
Parameters passed to the listener: ( fm, cmp, previousCmp, eOpts )

if ((cmp !== yourForm || !cmp.up(yourCmp)) && (previousCmp == yourform || previousCmp == previousCmp.up(yourCmp))) {
// validate yourForm

13 Apr 2013, 4:02 PM
Thanks slemmon,

Great idea! I hadnt noticed the componentfocus event.

My form panel xtype is 'vActionsClientTask'. What I did was this:

Ext.FocusManager.enable(true); // <-- pass true so I can see which component has focus
componentfocus: {
fn: function (fm, cmp, previousCmp, eOpts) {
if (previousCmp && (cmp.xtype !== 'vActionsClientTask' || !cmp.up('vActionsClientTask')) && (previousCmp.xtype == 'vActionsClientTask' || previousCmp.up('vActionsClientTask'))) {
console.log('componentfocus was vActionsClientTask');
scope: this

That works well for textfields and combo and radio. However when I click into a htmleditor component on the form the FocusManager doesnt notice. ie the componentfocus listener doesnt hear. It does notice if I click the htmleditor toolbar, but not if I just click straight into the body of the editor.

Any ideas on how to get the htmleditor to be noticed?


15 Apr 2013, 11:44 AM
Hmm... interesting question. HTMLEditor is a bit of a unique animal since it's an iFrame nested in a component. I suspect that's why FocusManager isn't aware of it as an observable component on the page. The HTMLEditor doesn't have all of the same events fired that you're used to (blur, focus, and specialkey are all unavailable), but you might be able to make some use of activate (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.field.HtmlEditor-event-activate)?