andyhill Posted April 11, 2020 Share Posted April 11, 2020 Grid Setup ... ' {'#13#10 + ' xtype: '#39'tbseparator'#39#13#10 + ' },'#13#10 + ' {'#13#10 + ' xtype: '#39'checkbox'#39','#13#10 + ' width: 24,'#13#10 + ' height: 24,'#13#10 + // NEED LEFT and TOP Padding Here ' tooltip: '#39'Filter: InAction'#39','#13#10 + ' handler: function() '#13#10 + ' {'#13#10 + ' ajaxRequest(sender, '#39'_InAct_'#39', []); '#13#10 + ' } '#13#10 + ' },'#13#10 + ' {'#13#10 + ' xtype: '#39'tbseparator'#39#13#10 + ' }'#13#10 + ... ////////////////////////////////////////////////////////////////////////////// if EventName = '_InAct_' then begin // Fires But TUniCheckBox(Sender).Checked State is UnStable Here UniSession.AddJS('ajaxRequest(fMain.dbGrid, ''_InActChk_'', ["Obj="+Sender]);'); // Send CheckBox Object Here via Ajax to read state after stabilized - HOW end; ////////////////////////////////////////////////////////////////////////////// if EventName = '_InActChk_' then begin // NEVER FIRES if TUniCheckBox(Params.Values['Obj']).Checked = True then begin // Read CheckBox Object State Here - HOW s:= 'checked'; end else begin s:= 'un-checked'; end; end; Quote Link to comment Share on other sites More sharing options...
andyhill Posted April 11, 2020 Author Share Posted April 11, 2020 Solved, Added Listener instead Quote Link to comment Share on other sites More sharing options...
andyhill Posted April 11, 2020 Author Share Posted April 11, 2020 Please show CheckBox Padding Options - Thanks Quote Link to comment Share on other sites More sharing options...
andyhill Posted April 11, 2020 Author Share Posted April 11, 2020 Also how to add tooltip to checkbox - Thanks Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 11, 2020 Share Posted April 11, 2020 6 minutes ago, andyhill said: Also how to add tooltip to checkbox - Thanks Hello Andy, Sorry, I really don’t understand what kind of checkbox are you talking about? Quote Link to comment Share on other sites More sharing options...
andyhill Posted April 11, 2020 Author Share Posted April 11, 2020 The Grid PagingBar CheckBox added above (xtype: '#39'checkbox'#39','#13#10 +) Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 11, 2020 Share Posted April 11, 2020 2 minutes ago, andyhill said: The Grid PagingBar CheckBox added above (xtype: '#39'checkbox'#39','#13#10 +) Please use PagingBarAuxControl property. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 11, 2020 Share Posted April 11, 2020 You can use Container (UniPanel) for example. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 11, 2020 Share Posted April 11, 2020 Quote Link to comment Share on other sites More sharing options...
andyhill Posted April 11, 2020 Author Share Posted April 11, 2020 I have the CheckBox in the Grid PagingBar, I have the Listener firing Ajax events showing current state of CheckBox - ALL GOOD. Can you please show me in code how to :- Add Padding to CheckBox (Position it equally between the Seperators) Add ToolTip to the CheckBox (Add flyout hint) Based on my script code below 'pagingBar.afterCreate=function pagingBar.afterCreate(sender)'#13#10 + '{'#13#10 + ' sender.add('#13#10 + ' [ '#13#10 + ' {'#13#10 + ' xtype: '#39'tbseparator'#39#13#10 + ' },'#13#10 + ' {'#13#10 + ' xtype: '#39'checkbox'#39','#13#10 + ' width: 24,'#13#10 + ' height: 24,'#13#10 + //' padding: 5px,'#13#10 + // FAILS JAVASCRIPT //' tooltip: '#39'Filter: InAction'#39','#13#10 + // DOES NOTHING ' listeners: '#13#10 + ' { '#13#10 + ' render: function(c) '#13#10 + ' { '#13#10 + ' Ext.QuickTips.register('#13#10 + ' { '#13#10 + ' target: c, '#13#10 + ' text: ''Filter: InAction'' '#13#10 + // DOES NOTHING ' }); '#13#10 + ' }, '#13#10 + ' change: function(el, v) '#13#10 + ' { '#13#10 + ' ajaxRequest(sender, "_InAct_", ["val="+v]) '#13#10 + // WORKS ' } '#13#10 + Quote Link to comment Share on other sites More sharing options...
andyhill Posted April 13, 2020 Author Share Posted April 13, 2020 UPDATE (1) I have managed to get Checkbox Tips working after a lot of experimentation (2) I have sort of got Padding working although it appears that it is only half implemented by Sencha ' {'#13#10 + ' xtype: '#39'checkbox'#39','#13#10 + ' id: ''ckOne'','#13#10 + ' width: 24,'#13#10 + ' height: 24,'#13#10 + ' tip: '#39'InAction'#39','#13#10 + ' style: ''margin: 2px; padding: 2px 2px 2px 2px;'','#13#10 + // Top, Right, Bottom, Left ' listeners: '#13#10 + ' { '#13#10 + ' render: function(c) '#13#10 + ' { '#13#10 + ' Ext.create(''Ext.tip.ToolTip'', '#13#10 + ' { '#13#10 + ' target: c.getEl(), '#13#10 + ' html: c.tip '#13#10 + ' } '#13#10 + ' ); '#13#10 + ' }, '#13#10 + ' change: function(el, v) '#13#10 + ' { '#13#10 + ' ajaxRequest(sender, "_InAction_", ["val="+v]) '#13#10 + ' } '#13#10 + ' } '#13#10 + ' },'#13#10 + style: renders the margin but not the padding, however if padding is omitted then margin is ignored ! (3) How do I set the ckOne.checked:= True/False; in JSCall ? dbGridFriends.JSInterface.JSCall('pagingBar.getComponent("ckOne").Checked = False', []); FAILS, Please advise ASAP - Thanks Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 13, 2020 Share Posted April 13, 2020 2 hours ago, andyhill said: 3) How do I set the ckOne.checked:= True/False; in JSCall ? dbGridFriends.JSInterface.JSCall('pagingBar.getComponent("ckOne").Checked = False', []); FAILS, Please advise ASAP - Thanks I have not tested your code, but there are some recommendations here: 1. You are using JSCall incorrectly. 2. Try this: dbGridFriends.JSInterface.JSCall('pagingBar.getComponent("ckOne").setValue', [False]); Quote Link to comment Share on other sites More sharing options...
andyhill Posted April 13, 2020 Author Share Posted April 13, 2020 Perfect Sherzod, Thank You. Any thoughts on the Margin / Padding comments above ? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 13, 2020 Share Posted April 13, 2020 1 hour ago, andyhill said: Any thoughts on the Margin / Padding comments above ? Can you show with a screenshot, what’s not working and how it should be? A simple, small test case would be great. Quote Link to comment Share on other sites More sharing options...
andyhill Posted April 13, 2020 Author Share Posted April 13, 2020 NoStyle (see below) WithStyle (see below), as mentioned before the Style is only partially working for me (I want the CheckBox centered horizontally as well), please advise how. ' style: ''margin: 2px; padding: 2px 2px 2px 2px;'','#13#10 + Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 13, 2020 Share Posted April 13, 2020 13 minutes ago, andyhill said: NoStyle (see below) WithStyle (see below), as mentioned before the Style is only partially working for me (I want the CheckBox centered horizontally as well), please advise how. Please make a simple testcase for reproduce. This is what it looks like for me, And it seems to me that they are centered... Quote Link to comment Share on other sites More sharing options...
andyhill Posted April 13, 2020 Author Share Posted April 13, 2020 This is rendered on a Microsoft Surface NoteBook via Chrome (this is a very Hi-Resolution device). Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 13, 2020 Share Posted April 13, 2020 Also try to use left (style), instead of margin/padding. Quote Link to comment Share on other sites More sharing options...
andyhill Posted April 13, 2020 Author Share Posted April 13, 2020 How would you do this ... Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 13, 2020 Share Posted April 13, 2020 36 minutes ago, andyhill said: ' style: ''margin: 2px; padding: 2px 2px 2px 2px;'','#13#10 + ' style: ''left: 10px;'','#13#10 + Quote Link to comment Share on other sites More sharing options...
andyhill Posted April 13, 2020 Author Share Posted April 13, 2020 Third CheckBox using 'left' and 'top' (makes no difference) ' style: ''left: 10px; top: 2px;'','#13#10 + Andy Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 13, 2020 Share Posted April 13, 2020 Can you attach a testcase with an empty grid but with a modified pagingBar? Quote Link to comment Share on other sites More sharing options...
andyhill Posted April 14, 2020 Author Share Posted April 14, 2020 This will take time as I am very busy, give me some time ... Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 14, 2020 Share Posted April 14, 2020 3 hours ago, andyhill said: This will take time as I am very busy, give me some time ... OK. 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.