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

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.

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!

I hope it helps, cheers!