andyhill Posted May 6, 2022 Share Posted May 6, 2022 I have a need to use the colour of the CheckBox tick to indicate a particular status where one can change its colour at runtime (not CSS) - please advise - thanks. Link to comment Share on other sites More sharing options...
andyhill Posted May 9, 2022 Author Share Posted May 9, 2022 Please advise - Thanks Link to comment Share on other sites More sharing options...
Sherzod Posted May 9, 2022 Share Posted May 9, 2022 On 5/7/2022 at 2:47 AM, andyhill said: not CSS Hello, Without CSS - no way. That's for sure. Link to comment Share on other sites More sharing options...
andyhill Posted May 9, 2022 Author Share Posted May 9, 2022 Perhaps I should have said not a static CSS rule, I need an individual approach that will not effect any other checkbox Link to comment Share on other sites More sharing options...
andyhill Posted May 10, 2022 Author Share Posted May 10, 2022 Any ideas Sherzod ? Link to comment Share on other sites More sharing options...
Sherzod Posted May 11, 2022 Share Posted May 11, 2022 I will try to analyze. Link to comment Share on other sites More sharing options...
Sherzod Posted May 11, 2022 Share Posted May 11, 2022 And it's not easy with "CSS" either. Link to comment Share on other sites More sharing options...
Sherzod Posted May 12, 2022 Share Posted May 12, 2022 Using FontAwesome... Link to comment Share on other sites More sharing options...
Sherzod Posted May 12, 2022 Share Posted May 12, 2022 27 minutes ago, Sherzod said: 1. CustomCSS: .customCheckbox .x-form-checkbox { font-family: FontAwesome; font-size: 14px; background-image: none !important; margin: 4px 0 0 0; } .customCheckbox.x-form-cb-checked .x-form-checkbox:before { content: '\f046'; color: green; } .customCheckbox .x-form-checkbox:before { content: '\f096'; } 2. Usage: procedure TMainForm.UniFormCreate(Sender: TObject); begin with UniCheckBox1.JSInterface do begin JSConfig('cls', ['customCheckbox']); end; end; 1 Link to comment Share on other sites More sharing options...
andyhill Posted May 12, 2022 Author Share Posted May 12, 2022 Yes, thank you Sherzod, colour is good - but how do I change this colour at runtime due to some internal status ? eg. if FaultyFlag = True then begin TickColor = Red end else begin TickColor = Green end; Link to comment Share on other sites More sharing options...
andyhill Posted May 12, 2022 Author Share Posted May 12, 2022 Sherzod, this was me testing:- CSS s:= '.customCheckboxGreen .x-form-checkbox '+ '{ '+ ' font-family: FontAwesome; '+ ' font-size: 16px; '+ ' background-image: none !important; '+ ' margin: 4px 0 0 0; '+ // Top, Right, Bottom, Left '} '+ '.customCheckboxGreen.x-form-cb-checked .x-form-checkbox:before '+ '{ '+ ' content: ''\f046''; '+ ' color: green; '+ '} '+ '.customCheckboxGreen .x-form-checkbox:before '+ '{ '+ ' content: ''\f096''; '+ '} '; CustomCSS.Add(s); // s:= '.customCheckboxRed .x-form-checkbox '+ '{ '+ ' font-family: FontAwesome; '+ ' font-size: 16px; '+ ' background-image: none !important; '+ ' margin: 4px 0 0 0; '+ // Top, Right, Bottom, Left '} '+ '.customCheckboxRed.x-form-cb-checked .x-form-checkbox:before '+ '{ '+ ' content: ''\f046''; '+ ' color: red; '+ '} '+ '.customCheckboxRed .x-form-checkbox:before '+ '{ '+ ' content: ''\f096''; '+ '} '; CustomCSS.Add(s); CHECKBOX cbPurOwing.LayoutConfig.BodyPadding:= '0 2 2 2'; // Top, Right, Bottom, Left *** NEVER UPDATES, MUST BE SET IN IDE *** with cbPurOwing.JSInterface do begin JSConfig('cls', ['customCheckboxGreen']); end; cbPurOwing.ClientEvents.ExtEvents.Clear; s:= 'mousedown=function mousedown(sender, x, y, eOpts) '#13#10 + '{ '#13#10 + // sender.preventDefault(); ' preventDefault(); '#13#10 + ' ajaxRequest(this, ''_eOpts_'', [''eOpts=''+eOpts]); '#13#10 + // eOpts=MouseButton: 0=Left, 2=Right '} '; cbPurOwing.ClientEvents.ExtEvents.Add(s); AJAXEVENT if EventName = '_eOpts_' then begin s:= Params['eOpts'].AsString; // MouseButton: 0=Left, 2=Right b:= StrToIntDef(s, 0); if b = 2 then begin // removeCls, addCls (setCls) configs with cbPurOwing do begin JSInterface.JSCall('removeCls', ['customCheckboxGreen']); JSInterface.JSCall('addCls', ['customCheckboxRed']); end; end else begin with cbPurOwing do begin JSInterface.JSCall('removeCls', ['customCheckboxRed']); JSInterface.JSCall('addCls', ['customCheckboxGreen']); end; end; end; // '_eOpts_' PROCESS LeftClick = Green RightClick THROWS UP CONTEXT MENU (I set disable above) ??? Please advise - thanks - Andy Link to comment Share on other sites More sharing options...
Sherzod Posted May 13, 2022 Share Posted May 13, 2022 8 hours ago, andyhill said: colour is good - but how do I change this colour at runtime due to some internal status ? Hello, For example. 1. CustomCSS: .customCheckbox .x-form-checkbox { font-family: FontAwesome; font-size: 14px; background-image: none !important; margin: 4px 0 0 0; } .customCheckbox.x-form-cb-checked .x-form-checkbox:before { content: '\f046'; } .customCheckbox .x-form-checkbox:before { content: '\f096'; } .customCheckbox.cred { color: red; } .customCheckbox.cgreen { color: green; } 2. Exemplary usage: procedure TMainForm.UniButton13Click(Sender: TObject); begin UniCheckBox1.JSInterface.JSCall('removeCls', ['cgreen']); UniCheckBox1.JSInterface.JSCall('addCls', ['cred']); end; procedure TMainForm.UniButton14Click(Sender: TObject); begin UniCheckBox1.JSInterface.JSCall('removeCls', ['cred']); UniCheckBox1.JSInterface.JSCall('addCls', ['cgreen']); end; Link to comment Share on other sites More sharing options...
andyhill Posted May 13, 2022 Author Share Posted May 13, 2022 Sherzod, the CSS above no longer works as intended ? Also I asked why I could not prevent Context Popup on Checkbox ? Link to comment Share on other sites More sharing options...
Sherzod Posted May 13, 2022 Share Posted May 13, 2022 6 minutes ago, andyhill said: the CSS above no longer works as intended ? Works for me. What's the issue? Link to comment Share on other sites More sharing options...
Sherzod Posted May 13, 2022 Share Posted May 13, 2022 41 minutes ago, andyhill said: Also I asked why I could not prevent Context Popup on Checkbox ? procedure TMainForm.UniFormCreate(Sender: TObject); begin with UniCheckBox1.JSInterface do begin JSConfig('cls', ['customCheckbox']); JSAddListener('afterrender', 'function(me){me.getEl().dom.addEventListener("contextmenu", function(e){e.preventDefault()})}'); //<-------- end; end; Link to comment Share on other sites More sharing options...
andyhill Posted May 13, 2022 Author Share Posted May 13, 2022 Thanks Sherzod for the Context Code. I have an issue with internal syncing of TUniCheckbox Tick with the browser - please show me how to set Checked with JavaScript instead. Here is my code:- procedure TfMain.cbPurOwingAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); begin ////////////////////////////////////////////////////////////////////////////// if EventName = '_RightClick_' then begin RightClickFlag:= True; ByPassChangeFlag:= True; if cbPurOwing.Checked = False then begin cbPurOwing.Checked:= True; // THIS HAS ISSUES SYNCRONIZING INTERNALLY WITH THE BROWSER ??? end else begin cbPurOwing.Checked:= False; // THIS HAS ISSUES SYNCRONIZING INTERNALLY WITH THE BROWSER ??? end; UniSession.AddJS('Ext.defer(function() {ajaxRequest(fMain.cbPurOwing, "_Process_", []);}, 1000)'); end; // '_RightClick_' ////////////////////////////////////////////////////////////////////////////// if EventName = '_Process_' then begin ByPassChangeFlag:= False; cbPurOwingChange(Self); end; end; Link to comment Share on other sites More sharing options...
Sherzod Posted May 14, 2022 Share Posted May 14, 2022 Tell me what you want to do. Link to comment Share on other sites More sharing options...
andyhill Posted May 14, 2022 Author Share Posted May 14, 2022 UniSession.AddJS( cbPurOwing checked = True or False ) Link to comment Share on other sites More sharing options...
Sherzod Posted May 15, 2022 Share Posted May 15, 2022 6 hours ago, andyhill said: UniSession.AddJS( cbPurOwing checked = True or False ) Sorry, you didn't fully describe your case... But try: UniCheckBox1.JSInterface.JSCall('setValue', [True]); //False Link to comment Share on other sites More sharing options...
andyhill Posted May 15, 2022 Author Share Posted May 15, 2022 Thank you Sherzod Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now