LoadMask | Font Awesome

[Sherzod]

Simple usage:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  try
    Sleep(5000);
  finally
    JSInterface.JSCall('setDisabled', [False], (Sender as TUniButton).JSControl)
  end;
end;

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  with UniButton1.JSInterface do
  begin
    JSConfig('_iconCls', ['x-fa fa-save']);
    JSConfig('iconAlign', ['right']);
    JSAddListener('disable', 'function(){this.setIconCls("x-fa fa-spinner fa-spin")}');
    JSAddListener('enable', 'function(){this.setIconCls(this.getConfig("_iconCls"))}');
    JSAddListener('click', 'function(){this.setDisabled(true)}');
  end;
end;

 

[picyka]

It's very cool

 

Thank you Sherzod

[picyka]

1 hour ago, Sherzod said:

Simple usage:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  try
    Sleep(5000);
  finally
    JSInterface.JSCall('setDisabled', [False], (Sender as TUniButton).JSControl)
  end;
end;

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  with UniButton1.JSInterface do
  begin
    JSConfig('_iconCls', ['x-fa fa-save']);
    JSConfig('iconAlign', ['right']);
    JSAddListener('disable', 'function(){this.setIconCls("x-fa fa-spinner fa-spin")}');
    JSAddListener('enable', 'function(){this.setIconCls(this.getConfig("_iconCls"))}');
    JSAddListener('click', 'function(){this.setDisabled(true)}');
  end;
end;

 

Sherzod, Put any rule in the button's Onclick event the first time works, the second no longer triggers the click

[Sherzod]

1 minute ago, picyka said:

Put any rule in the button's Onclick event the first time works, the second no longer triggers the click

Sorry?

[picyka]

9 minutes ago, Sherzod said:

Sorry?

My mistake here, sorry.

[picyka]

Sherzod, you who are the master, a challenge hahaha,

and if it were an OnColumnActionClick on the grid,

what would be your magic?

😀

[picyka]

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  (Sender as TUniButton).JSInterface.JSCall('setText', ['Start']);
  try
    Sleep(5000);
  finally
    (Sender as TUniButton).Caption := 'Finish';
    (Sender as TUniButton).JSInterface.JSCall('setDisabled', [False], (Sender as TUniButton).JSControl)
  end;
end;

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  with UniButton1.JSInterface do
  begin
    JSConfig('_iconCls', ['x-fa fa-save']);
    JSConfig('iconAlign', ['left']);
    JSAddListener('disable', 'function(){this.setIconCls("x-fa fa-spinner fa-spin")}');
    JSAddListener('enable', 'function(){this.setIconCls(this.getConfig("_iconCls"))}');
    JSAddListener('click', 'function(){this.setDisabled(true)}');
  end;
end;

I just couldn't change the caption of the button on click.

[Sherzod]

1 minute ago, picyka said:

JSAddListener('click', 'function(){this.setDisabled(true)}');
  end;

Should be added here.

[Sherzod]

59 minutes ago, picyka said:

Sherzod, you who are the master, a challenge hahaha,

and if it were an OnColumnActionClick on the grid,

what would be your magic?

 

In such a case, where should the mask be applied? UniDBGrid?

[Sherzod]

1 hour ago, picyka said:

Sherzod, you who are the master, a challenge hahaha,

and if it were an OnColumnActionClick on the grid,

what would be your magic?

😀

 

18 minutes ago, Sherzod said:

 

In such a case, where should the mask be applied? UniDBGrid?

For this case it is better to use UniButtonWidget, for example:

 

[Sherzod]

47 minutes ago, picyka said:

I just couldn't change the caption of the button on click.

 

44 minutes ago, Sherzod said:

47 minutes ago, picyka said:

JSAddListener('click', 'function(){this.setDisabled(true)}');
  end;

Should be added here.

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  with UniButton1.JSInterface, UniButton1 do
  begin
    JSConfig('_iconCls', ['x-fa fa-save']);
    JSConfig('_text', [Caption]);
    JSConfig('iconAlign', ['right']);
    JSAddListener('disable', 'function(){this.setIconCls("x-fa fa-spinner fa-spin")}');
    JSAddListener('enable', 'function(){this.setIconCls(this.getConfig("_iconCls")); this.setText(this.getConfig("_text"))}');
    JSAddListener('click', 'function(){this.setDisabled(true); this.setText("Saving...")}');
  end;
end;

 

[picyka]

52 minutes ago, Sherzod said:

 

For this case it is better to use UniButtonWidget, for example:

 

Would it be possible to change the icon and make it rotate, in the grid column itself?

[Sherzod]

3 minutes ago, picyka said:

Would it be possible to change the icon and make it rotate, in the grid column itself?

So, do you mean using actioncolumn?

[picyka]

Just now, Sherzod said:

Então, você quer dizer usar a coluna de ação?

Honestly, I don't know if that would be the best place, I have to search for models on the web, to see how common it is to do this in systems

[picyka]

It seems that when I don't use ScreenMask it gets faster, I don't know if it's my eyes

[Sherzod]

Just now, picyka said:

It seems that when I don't use ScreenMask it gets faster, I don't know if it's my eyes

Can you please clarify? 

[picyka]

My standard registration screen always opens a query, where there are actions.

Can I use the UniTabSheet.Caption instead of using the Grid's ScreenLoad?

 

Something similar to the animation that the browser itself has..

 

Another modern animation would be this one

time 3:52

[Sherzod]

Indeterminate progress bar?

[picyka]

On 22/03/2022 at 18:37, Sherzod said:

Barra de progresso indeterminado?

I did some research, I don't know if this is possible in ExtJs

[picyka]

https://stackoverflow.com/questions/34773266/how-to-write-css-keyframes-to-indeterminate-material-design-progress-bar

would be triggered when loading the grid, an alternative to the grid's ScreenMask

[picyka]

Is there an event in the Grid, where I can know that the data has finished loading?

[Sherzod]

Hello, 

1 hour ago, picyka said:

Is there an event in the Grid, where I can know that the data has finished loading?

AfterLoad event?

[picyka]

procedure TUniFrameCons.UniDBGridConsultaAfterLoad(Sender: TUniCustomDBGrid);
begin
  if (Self.Parent is TUniTabSheet) then
    TUniTabSheet(Self.Parent).ImageIndex := 49;
end;

procedure TUniFrameCons.UniDBGridConsultaBeforeLoad(Sender: TUniCustomDBGrid);
begin
  if (Self.Parent is TUniTabSheet) then
    TUniTabSheet(Self.Parent).ImageIndex := 3;
end;

I thought of something like this but it didn't work as expected, maybe some client side event