Alessandro Posted October 16, 2015 Share Posted October 16, 2015 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. Quote Link to comment Share on other sites More sharing options...
mhmda Posted October 17, 2015 Share Posted October 17, 2015 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... 3 1 Quote Link to comment Share on other sites More sharing options...
Alessandro Posted October 19, 2015 Author Share Posted October 19, 2015 Thaks mohammad Quote Link to comment Share on other sites More sharing options...
skafy Posted January 13, 2016 Share Posted January 13, 2016 Isn't there any easier way. What if I want to change color in the runtime on dynamically created button? Quote Link to comment Share on other sites More sharing options...
mhmda Posted January 13, 2016 Share Posted January 13, 2016 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: 1 Quote Link to comment Share on other sites More sharing options...
Ulugbek Posted July 8, 2016 Share Posted July 8, 2016 How change color UniSpeedButton on down set? Quote Link to comment Share on other sites More sharing options...
Alessandro Posted September 16, 2016 Author Share Posted September 16, 2016 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. Quote Link to comment Share on other sites More sharing options...
Kattes Posted November 2, 2018 Share Posted November 2, 2018 I tried this trick with current Unigui version, but without any success. Could it be that something was changed in Sencha engine syntax? thx Quote Link to comment Share on other sites More sharing options...
delagoutte Posted November 5, 2018 Share Posted November 5, 2018 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; Quote Link to comment Share on other sites More sharing options...
skafy Posted September 23, 2021 Share Posted September 23, 2021 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? Quote Link to comment Share on other sites More sharing options...
irigsoft Posted September 23, 2021 Share Posted September 23, 2021 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";') 1 Quote Link to comment Share on other sites More sharing options...
skafy Posted September 23, 2021 Share Posted September 23, 2021 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; Quote Link to comment Share on other sites More sharing options...
irigsoft Posted September 23, 2021 Share Posted September 23, 2021 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) Quote Link to comment Share on other sites More sharing options...
skafy Posted September 23, 2021 Share Posted September 23, 2021 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. Quote Link to comment Share on other sites More sharing options...
irigsoft Posted September 23, 2021 Share Posted September 23, 2021 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) Quote Link to comment Share on other sites More sharing options...
Abaksoft Posted September 23, 2021 Share Posted September 23, 2021 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 Quote Link to comment Share on other sites More sharing options...
skafy Posted September 23, 2021 Share Posted September 23, 2021 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 1 Quote Link to comment Share on other sites More sharing options...
skafy Posted September 23, 2021 Share Posted September 23, 2021 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) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.