browse by category or date

In my prototype of JSON Table Editor, I have added a check box to regulate paste event behaviour. When it’s checked, a paste will overwrite the selected cell and/or the cells below it, depending on the number of data of the pasted text. When the number of data is greater than the number rows, new data will be created by duplicating the last row and overwrite it.

But for now I haven’t done that because I was disturbed by the way the check box is rendered as shown below:

The Checkbox is rendered not in the same line as the rest of the items in Toolbar

The Checkbox is rendered not in the same line as the rest of the items in Toolbar

Yes it is subtle. But my eyes found it irritating 😀

The CheckBox is created using below configuration inside Grid Panel:

dockedItems : [
	{
		xtype : 'toolbar',
		dock : 'top',
		items : [
			//.... other control inside toolbar
			{
				xtype : 'checkbox',
				id : 'chkOverwrite',
				boxLabel : 'Overwrite',
				boxLabelCls : 'x-toolbar-text'										
			}
			//.....
		]
	}
]									

Now we need to inspect the rendered HTML element. And I think we find the suspect.
Chrome Inspect Element

To fix this, we need to add the following code inside Ext.ready()

Ext.onReady(function ()
{
   // ... do other stuffs
   Ext.defer(function(){
      var chk = Ext.getCmp("chkOverwrite");
      chk.bodyEl.applyStyles("padding-top:1px");
   }, 1500);
});

Now the checkbox looks nicer!

extjs.chk.tb.2

I hope it helps, cheers!

GD Star Rating
loading...
How To Change Ext JS Radio Button/Check Box Positioning in Toolbar [SOLVED], 4.0 out of 5 based on 1 rating

About Hardono

Hi, I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 9 years.

No Comment

Add Your Comment