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:
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!
loading...
About Hardono
Incoming Search
bugs, extjs, javascript