CHANGE BACKGROUND COLOR BUTTON [SOLVED]

[Alessandro]

Hello, how do I change the background color of a button?

The TuniSpeedButton component has the Color option, however, the selected color does not.

 

Thank you.

[mhmda]

Hi,

 

ExtEvents:

function added(sender, container, pos, eOpts)
{
  sender.addCls('bntLogin');
}

CSS (servermodule):

.bntLogin
{
 background:#1892d1 !important;
 color:#fff !important;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
}
.bntLogin:hover
{
 background:#828282 !important;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
}

Hope this will help you...

[Alessandro]

Thaks mohammad

[skafy]

Isn't there any easier way. What if I want to change color in the runtime on dynamically created button?

[mhmda]

For a button (for example) I think this is enough (always refer to extjs api)   http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.button.Button:

 

 

 

Use it like this:

 

[Ulugbek]

How change color UniSpeedButton on down set?

[Alessandro]

Como mudar a cor do botão em tempo de execução?

Por exemplo, tenho duas CSS (vermelho e azul), dependendo do resultado de um procedimento

eu tenho que mudar a cor para vermelho, pra chamar a atenção. Como fazer isso?

 

se eu coloco o comando no onShow, funciona:

   UniBitBtn24.ClientEvents.ExtEvents.values['added'] := 'function added(sender, container, pos, eOpts) {sender.addCls("botaoVermelho");}';

 

Mas... em tempo de execução, não.

Usei Repaint, Refresh, Update no botão e nada!

 

------------------------------------

 

How to change the button's color at runtime?

For example, I have two CSS (red and blue), depending on the outcome of a procedure

I have to change the color to red, to draw attention. How to do this?

 

If I post in onShow, ok:

   UniBitBtn24.ClientEvents.ExtEvents.values['added'] := 'function added(sender, container, pos, eOpts) {sender.addCls("botaoVermelho");}';

 

But, in Runtime, not!

I test whith Repaint, refresh, update button, nothing!!!

 

Obrigado.

[Kattes]

I tried this trick with current Unigui version, but without any success. Could it be that something was changed in Sencha engine syntax?

thx

[delagoutte]

you could use a thing like that for change at runtime:

if blue then    
begin
  UniSession.AddJS('$(''#'+MyUniGuiButon.JSId+''').removeClass(''BtnRed'')');
  UniSession.AddJS('$(''#'+MyUniGuiButon.JSId+''').addClass(''BtnBlue'')');
end
else
begin
  UniSession.AddJS('$(''#'+MyUniGuiButon.JSId+''').removeClass(''BtnBlue'')');
  UniSession.AddJS('$(''#'+MyUniGuiButon.JSId+''').addClass(''BtnRed'')');
end;

 

[skafy]

If custom CSS must be defined in Server module it must be done in design time.

 

How can I change color of a button in runtime to any color?

[irigsoft]

1 hour ago, skafy said:

If custom CSS must be defined in Server module it must be done in design time.

 

How can I change color of a button in runtime to any color?

Just use :

uniSession.AddJS ('document.getElementById("' + YourComponent.jsID + '").style.background = "red";')

[skafy]

I'm getting below error. If I debug JSid has value.

 

 

Code:

 

procedure TDetail.ShowButtons(APanel : TUniPanel);
var
  Name: string;
  Color: string;
  Align: string;
begin
  UniMainModule.qryGETButtons.Close;
  try
    UniMainModule.qryGETButtons.ParamByName('TASKINS_ID').AsInteger:= Taskins_ID;
    UniMainModule.qryGETButtons.Prepare;
    UniMainModule.qryGETButtons.Open;
    while not UniMainModule.qryGETButtons.Eof do
    begin
      Name:= UniMainModule.qryGETButtons.FieldByName('NAME').AsString;
      Color:= UniMainModule.qryGETButtons.FieldByName('COLOR').AsString;
      Align:= UniMainModule.qryGETButtons.FieldByName('ALIGN').AsString;

      var Button: TUniButton;
      Button:= TUniButton.Create(Self);
      Button.Parent:= APanel;
      Button.AlignWithMargins:= True;
      Button.Caption:= Name;
      uniSession.AddJS ('document.getElementById("' + Button.JSId + '").style.background = "red";');

      if Align = 'Left' then
        button.Align:= alLeft
      else if Align = 'Center' then
        button.Align:= alClient
      else if Align = 'Right' then
        button.Align:= alRight;

      UniMainModule.qryGETButtons.Next;
    end;
  finally
    UniMainModule.qryGETButtons.Close;
  end;
end;

 

[irigsoft]

16 minutes ago, skafy said:

uniSession.AddJS ('document.getElementById("' + Button.JSId + '").style.background = "red";');

 

Try to use this function on TForm.OnReady. Set Color after all components are created.

I use this on OnButtonClick. (Form and all components are already created)

 

 

[skafy]

7 minutes ago, irigsoft said:

You have to set jsID if this is runtime created component.

 

 

I've tried but it gives me error-> Cannot assign to a read-only property

 

I've also stated that when i debug button.JSid is not null and different between loop cycles.

[irigsoft]

1 minute ago, skafy said:

I've tried but it gives me error-> Cannot assign to a read-only property

 

I've also stated that when i debug button.JSid is not null and different between loop cycles.

I am sorry i have changed my post.

Please try to set color on Form.OnReady.

I use addJS on OnButtonClick. (Form and all components are already created)

[Abaksoft]

2 hours ago, skafy said:

If custom CSS must be defined in Server module it must be done in design time.

 

How can I change color of a button in runtime to any color?

Hello,

Try this (Thx to Sherzod)

Color_Button.7z

[skafy]

39 minutes ago, irigsoft said:

I am sorry i have changed my post.

Please try to set color on Form.OnReady.

I use addJS on OnButtonClick. (Form and all components are already created)

I've managed to change colors now in FormReady event. Thank you for your help.

So I've created buttons in FormCreate event end than find them on FormReady event end change their color.

procedure TDetail.ChangeButtonColors(APanel: TUniPanel);
var
  Name: string;
  Color: string;
begin
  UniMainModule.qryGETButtons.Close;
  try
    UniMainModule.qryGETButtons.Prepare;
    UniMainModule.qryGETButtons.Open;
    UniMainModule.qryGETButtons.First;
    while not UniMainModule.qryGETButtons.Eof do
    begin
      Name:= UniMainModule.qryGETButtons.FieldByName('NAME').AsString;
      Color:= UniMainModule.qryGETButtons.FieldByName('COLOR').AsString;

      var Button: TUniButton;
      Button:= (APanel.FindComponent(Name) as TUniButton);
      if Assigned(Button) then
        uniSession.AddJS ('document.getElementById("' + Button.JSId + '").style.background = "' + Color + '";');
      
      UniMainModule.qryGETButtons.Next;
    end;
  finally
    UniMainModule.qryGETButtons.Close;
  end;
end;

Thanks again

[skafy]

9 minutes ago, Abaksoft said:

Hello,

Try this (Thx to Sherzod)

Color_Button.7z 22.71 kB · 2 downloads

I've tried and still cannot be changed in FormCreate event. (But I've managed to change color based on irigsoft's  help)