Show Mask after some seconds

[irigsoft]

Hello,

is it possible to display a screen mask after a few seconds with some delay.

If you press the button and it takes more than 2 seconds, then the screen mask will be displayed, otherwise the screen mask will not be displayed

[Sherzod]

12 hours ago, irigsoft said:

is it possible to display a screen mask after a few seconds with some delay.

If you press the button and it takes more than 2 seconds, then the screen mask will be displayed, otherwise the screen mask will not be displayed

Hello,

In the simplest case...

1. UniButton1 -> ScreenMask -> Enabled = False

2. UniButton1 -> ClientEvents ->

function afterrender(sender, eOpts)
{
    sender.delayedTask = Ext.create('Ext.util.DelayedTask', function() {
        sender.btnMask = new Ext.LoadMask({
            msg: 'Please wait...',
            target: MainForm.window //?
        });
        sender.btnMask.show()
    }, this);
    
    sender.getEl().on('click', function() {
         sender.setDisabled(true);
         sender.delayedTask.delay(2000);
    });
}

3. 

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  //some long-running task
  
  with (Sender as TUniButton).JSInterface do
  begin
    JSCall('delayedTask.cancel', []);
    JSCode('if ('#1'.btnMask) {'#1'.btnMask.hide()};');
    JSCall('setDisabled', [False]);
  end;
end;

 

[irigsoft]

4 minutes ago, Sherzod said:

Hello,

In the simplest case...

1. UniButton1 -> ScreenMask -> Enabled = False

2. UniButton1 -> ClientEvents ->

function afterrender(sender, eOpts)
{
    sender.delayedTask = Ext.create('Ext.util.DelayedTask', function() {
        sender.btnMask = new Ext.LoadMask({
            msg: 'Please wait...',
            target: MainForm.window //?
        });
        sender.btnMask.show()
    }, this);
    
    sender.getEl().on('click', function() {
         sender.setDisabled(true);
         sender.delayedTask.delay(2000);
    });
}

3. 

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  //some long-running task
  
  with (Sender as TUniButton).JSInterface do
  begin
    JSCall('delayedTask.cancel', []);
    JSCode('if ('#1'.btnMask) {'#1'.btnMask.hide()};');
    JSCall('setDisabled', [False]);
  end;
end;

 

Thanks,

is this posible to make this with global script on mainform?

 

[irigsoft]

Sorry, but

sender.delayedTask.delay(2000);

it is not what i looking for.

https://docs.sencha.com/extjs/6.5.1/classic/Ext.util.DelayedTask.html

 

I want to start the execution by clicking the button, but if the execution takes less than 3 seconds not to show the mask on the screen, if it is more than 3 seconds, then to show the mask.

[Sherzod]

37 minutes ago, irigsoft said:

Sorry, but

sender.delayedTask.delay(2000);

it is not what i looking for.

https://docs.sencha.com/extjs/6.5.1/classic/Ext.util.DelayedTask.html

 

I want to start the execution by clicking the button, but if the execution takes less than 3 seconds not to show the mask on the screen, if it is more than 3 seconds, then to show the mask.

Here, delayedTask is exactly for showing the mask, and the code works immediately after clicking on the button.  

[irigsoft]

5 hours ago, Sherzod said:

Here, delayedTask is exactly for showing the mask, and the code works immediately after clicking on the button.  

OK, I try to apply this on tuniBitBtn, TunISpeedButton, tuniButton and get error

 

after create Control, there is my code:

 

      IF TuniControl (UniMainModule.NewComponent).ClassNameIs('TuniButton')
      OR TuniControl (UniMainModule.NewComponent).ClassNameIs('TuniBitBtn')
      OR TuniControl (UniMainModule.NewComponent).ClassNameIs('TColorButton')
      OR TuniControl (UniMainModule.NewComponent).ClassNameIs('TUniSpeedButton')
      then begin
          TuniBitBtn (UniMainModule.NewComponent).ClientEvents.ExtEvents.Values['onafterrender'] :=
'function afterrender(sender, eOpts)'
+ '{'
+ '    sender.delayedTask = Ext.create(''Ext.util.DelayedTask'', function() {'
+ '        sender.btnMask = new Ext.LoadMask({'
+ '            msg: ''Please wait...'','
+ '            target: MainForm.window //?'
+ '        });'
+ '        sender.btnMask.show()'
+ '    }, this);'
+ '    sender.getEl().on(''click'', function() {'
+ '         sender.setDisabled(true);'
+ '         sender.delayedTask.delay(2000);'
+ '    });'
+ '}'
    end;
 

[Sherzod]

Just now, irigsoft said:

OK, I try to apply this on tuniBitBtn, TunISpeedButton, tuniButton and get error

Please make a simple testcase.

[irigsoft]

Just now, Sherzod said:

Please make a simple testcase.

there is my code, after create Control on form creation:

      IF TuniControl (UniMainModule.NewComponent).ClassNameIs('TuniButton')
      OR TuniControl (UniMainModule.NewComponent).ClassNameIs('TuniBitBtn')
      OR TuniControl (UniMainModule.NewComponent).ClassNameIs('TColorButton')
      OR TuniControl (UniMainModule.NewComponent).ClassNameIs('TUniSpeedButton')
      then begin
          TuniBitBtn (UniMainModule.NewComponent).ClientEvents.ExtEvents.Values['onafterrender'] :=
'function afterrender(sender, eOpts)'
+ '{'
+ '    sender.delayedTask = Ext.create(''Ext.util.DelayedTask'', function() {'
+ '        sender.btnMask = new Ext.LoadMask({'
+ '            msg: ''Please wait...'','
+ '            target: MainForm.window //?'
+ '        });'
+ '        sender.btnMask.show()'
+ '    }, this);'
+ '    sender.getEl().on(''click'', function() {'
+ '         sender.setDisabled(true);'
+ '         sender.delayedTask.delay(2000);'
+ '    });'
+ '}'
    end;
 

[Sherzod]

4 minutes ago, irigsoft said:

+ '            target: MainForm.window //?'

Try this:

ClientEvents.ExtEvents.Values['onafterrender'] :=
  'function afterrender(sender, eOpts)'
  + '{'
  + '    sender.delayedTask = Ext.create(''Ext.util.DelayedTask'', function() {'
  + '        sender.btnMask = new Ext.LoadMask({'
  + '            msg: ''Please wait...'','
  + '            target: MainForm.window '
  + '        });'
  + '        sender.btnMask.show()'
  + '    }, this);'
  + '    sender.getEl().on(''click'', function() {'
  + '         sender.setDisabled(true);'
  + '         sender.delayedTask.delay(2000);'
  + '    });'
  + '}'

 

[irigsoft]

22 minutes ago, Sherzod said:

Try this:

ClientEvents.ExtEvents.Values['onafterrender'] :=
  'function afterrender(sender, eOpts)'
  + '{'
  + '    sender.delayedTask = Ext.create(''Ext.util.DelayedTask'', function() {'
  + '        sender.btnMask = new Ext.LoadMask({'
  + '            msg: ''Please wait...'','
  + '            target: MainForm.window '
  + '        });'
  + '        sender.btnMask.show()'
  + '    }, this);'
  + '    sender.getEl().on(''click'', function() {'
  + '         sender.setDisabled(true);'
  + '         sender.delayedTask.delay(2000);'
  + '    });'
  + '}'

 

Thanks it's ok now.

but i get screenmask for milliseconds visible, maybe if mainform.screenmask is enabled this is result , did You know?

[Sherzod]

5 minutes ago, irigsoft said:

but i get screenmask for milliseconds visible, maybe if mainform.screenmask is enabled this is result , did You know?

 

7 hours ago, Sherzod said:

1. UniButton1 -> ScreenMask -> Enabled = False

 

[irigsoft]

2 minutes ago, Sherzod said:

 

 

Yes, that was the problem, thanks

[irigsoft]

Now, I use Suspend and ResumeLayouts on BtnClick.

after applying a method, parental control (TuniPanel, uniGroupbox) becomes deactivated

 

  TuniForm (TuniControl (sSender).OwnerForm).SuspendLayouts;  

................... procedure .....................

TuniForm (TuniControl (sSender).OwnerForm).ResumeLayouts;
TuniForm (TuniControl (sSender).OwnerForm).HideMask;

    if ((TuniControl (sSender).ClassNameIs('TUniBitBtn'))
        OR (TuniControl (sSender).ClassNameIs('TUniButton'))
        OR (TuniControl (sSender).ClassNameIs('TUniSpeedButton'))
    )
    then begin
      with TUniBitBtn (sSender).JSInterface do begin
          JSCall('delayedTask.cancel', []);
          JSCode('if ('#1'.btnMask) {'#1'.btnMask.hide()};');
          JSCall('setDisabled', [False]);
      end;
    end;

[Sherzod]

6 minutes ago, irigsoft said:

with TUniBitBtn (sSender).JSInterface

?

[irigsoft]

Just now, Sherzod said:

?

I found the problem: 

ClientEvents.ExtEvents.Values['onafterrender'] :=
  'function afterrender(sender, eOpts)'
  + '{'
  + '    sender.delayedTask = Ext.create(''Ext.util.DelayedTask'', function() {'
  + '        sender.btnMask = new Ext.LoadMask({'
  + '            msg: ''Please wait...'','
  + '            target: MainForm.window '
  + '        });'
  + '        sender.btnMask.show()'
  + '    }, this);'
  + '    sender.getEl().on(''click'', function() {'
  + '         sender.setDisabled(true);'
  + '         sender.delayedTask.delay(2000);'
  + '    });'
  + '}'

[irigsoft]

Thanks, now work just fine.

[Sherzod]

1 minute ago, irigsoft said:

sender.setDisabled(true);

This prevents multiple clicks on the button.

[irigsoft]

1 minute ago, Sherzod said:

This prevents multiple clicks on the button.

I disable button on start of procedure executions, on server side.

but this disable the parent on my project, and no enabling again

[Sherzod]

Okay.