form: onBlur validation for multiple fields

[apicito]

How I can capture the blur event on a grouping of fields?.
For example UnigroupBox or Panel. The panel does not trigger the onBlur event and groupbox don't have is this event.
See attached image:

 

 

[apicito]

Clarifying my first post:
I need to do the validation of multiple fields when leaving a grouping of Edits.
If I use a uniPanel for grouping two edits I do:

in extEvent -> Blur of uniPanel:

function blur(sender, the, eOpts)
{
    ajaxRequest(sender, 'eventoSair', ['param0=MyParam'] );
}

In UniPanel1AjaxEvent of uniPanel:

procedure TMainForm.UniPanel1AjaxEvent(Sender: TComponent; EventName: string;Params: TStrings);
begin
  if EventName='eventoSair' then
  begin
    UniMemo1.Lines.Add('Server Response:');
    UniMemo1.Lines.Add('===============');
    UniMemo1.Lines.Add(Params.Values['param0']);
    UniMemo1.Lines.Add('');
  end;
end;

I can´t use uniGroupBox for grouping because it don't have the "onAjaxEvent".
Can anyone provide me some solution to this?.

[Sherzod]

Hi apicito. 

 

Very interesting question! 

 

There is a solution for UniPanel. 

I think for UniGroupBox, also can use UniPanel, inside which will UniGroupBox ... 

 

Try ... 

 

add Events in UniPanel1 afterrender and blur:

 

function afterrender(sender, eOpts)
{
  Ext.FocusManager.enable();
  var arr = [];
  arr.push(sender.id);    
  sender.query().forEach(function (e) {if (e.inputEl) {arr.push(e.inputEl.id)} else {arr.push(e.id); arr.push(e.id + '-body');} });
    
  sender.query().forEach(function (e) {e.on('blur', function (e) 
    { 
      setTimeout(function(){         
         if (Ext.get(document.activeElement).id) {
           for (var i = 0; i < arr.length; i++) {
             if (arr[i] === Ext.get(document.activeElement).id) {                              
               return false;
             }             
           };
           sender.fireEvent('blur', e);
         }                          
      }, 10);      
      return false;                         
    } 
    )});  
}

function blur(sender, the, eOpts)
{   
  if (sender.id == MainForm.UniPanel1.id) {
  var arr = [];
  arr.push(sender.id);  
  sender.query().forEach(function (e) {if (e.inputEl) {arr.push(e.inputEl.id)} else {arr.push(e.id); arr.push(e.id + '-body');} });  
  
  setTimeout(function(){         
         if (Ext.get(document.activeElement).id) {
           for (var i = 0; i < arr.length; i++) {
             if (arr[i] === Ext.get(document.activeElement).id) {                              
               return false;
             }             
           };
           ajaxRequest(MainForm.UniPanel1, '_blur', ['param0=0']);
         }                          
      }, 10);      
      return false;
  }
  else {ajaxRequest(MainForm.UniPanel1, '_blur', ['param0=0']);}
}

procedure TMainForm.UniPanel1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TStrings);
begin
  if EventName = '_blur' then begin
    //your custom logic
    ShowMessage('blur on Panel');
  end;
end;

certainly can code needs to be optimized...

 

 

 

Tested in FF and Chrome ...

 

Sincerely

[apicito]

Fine!. Thanks Delphi Developer.

But do not think it would be useful to support a simpler Blur event in Panels and GroupBox?

I will propose in new features forum.

regards.

[Sherzod]

Sorry one more clarification ... 

 

If only panel, or groupbox

it can be a single command: include 

Ext.FocusManager.enable ();

Then onblur event will work! 

 

But here there is a group onblur ... 

 

Sincerely

[apicito]

I understand.

Tnks.