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!

In my previous post, I mentioned that Firefox doesn’t make the clipboard data in paste event handler.

Sure there is a workout, but it is a dirty hack which is done by

1. Detect a ctrl-v / shift-ins event using a keypress event handler
2. In that handler, save the current user selection, add a textarea element off-screen (say at left -1000px) to the document, turn designMode off and call focus() on the textarea, thus moving the caret and effectively redirecting the paste
3. Set a very brief timer (say 1 millisecond) in the event handler to call another function that stores the textarea value, removes the textarea from the document, turns designMode back on, restores the user selection and pastes the text in.

So I dig deeper and found the bug report in Mozilla’s Bugzilla. So back to 11th December 2007, a user named Spam complained why Firefox doesn’t have clipboardData access when paste event happened. He also mentioned that Chrome/Safari and Internet Explorer already implemented and quite secure.

From there, the progress had been very very slow I must say. Just look at the chart below:

But I guess this bug is almost resolved, albeit taking 5+ years. Neil Deakin has the last words on that bug report page. He suggested that no more round of reviews are required as the patches has resulted similar behaviour to WebKit with minor differences. So yeah, we are going to have clipboardData object in Firefox.

But when? I don’t know. So far there are no indication whether this bug-fix will be included in Firefox’s next release. As for JSON Table Editor, the paste event handling only will be done on Google Chrome, Safari and Opera.

Cheers,

Hardono

I was working on another feature of JSON Table Editor when I stumbled into this mess. The feature that I was working is ability to paste HTML/Excel onto the Grid. So naturally, I need to capture paste event.

After a few trials in Chrome and IE, I noticed that the implementation of paste event is inconsistent between Chrome and IE. Intrigued, I decided to do more test. The test that I’ve done was conducted in the following browsers:

1. Google Chrome Version 24.0.1312.57 m
2. Internet Explorer Version 10.0.9200.16439
3. Firefox Version 18.0.2
4. Opera Version 12.14 Build 1738
5. Safari Version 5.1.7 (7534.57.2)

To debug the JavaScript, almost all browsers have their own debugging tools except Firefox.

1. Google Chrome has Developer Tools that can be activated with Ctrl + Shift + I
2. Internet Explorer’s Developer Tools can be activated using F12
3. Firefox requires you to install Firebug to debug JavaScript.
4. Opera’s developer tools is called DragonFly. Same as Google Chrome, it is also activated using Ctrl + Shift + I
5. Safari’s developer tools is called Web Inspector. To activate it, click menu Develop → Show Web Inspector. We can also use Ctrl + Alt + I to activate it

The ExtJS code to capture the paste event:

Ext.onReady(function () {
   //....do other stuffs
   //....
   //handle paste event
   Ext.getBody().on('paste', function (evt, target) {
      var pastedText = "";
      if (Ext.isIE) {
         pastedText = window.clipboardData.getData('Text');
      }
      else if (Ext.isGecko) {
         //Sadly we can't retrieve data in Firefox
         pastedText = "";
      }
      else if (Ext.isOpera) {
         pastedText = evt.browserEvent.clipboardData.getData('text/plain');
      }
      else if (Ext.isWebKit) {
         //WebKit based browsers. i.e: Chrome, Safari
         pastedText = evt.browserEvent.clipboardData.getData('text/plain');
      }
      if (pastedText != "")
         Ext.MessageBox.alert('success', pastedText);
   });
   //....do other stuffs
   //....
}

Result

The result is somewhat surprising considering that the top 3 browsers are Chrome, IE and Firefox respectively.

Source: StatCounter Global Stats – Browser Market Share

So as expected, Google Chrome performed the best. The event handler is executed regardless on which element the paste action was done. The clipboard data also available for usage.

Internet Explorer and Firefox are somewhat disappointing. They execute the event handler only when the paste action was done in text input (textfield, textarea). And Firefox make it even worse by making the clipboard data unavailable for usage, unlike Internet Explorer.

Safari’s result is sort of expected since it uses the same layout engine as Google Chrome. But its Web Inspector is disappointing. It always crashed whenever I set breakpoints on above code and perform paste action. This is the only reason I put Ext.MessageBox.alert() in the test code above.

The surprise came from Opera. Although it is using different layout engine (Presto), it behaves similarly to Google Chrome. Has Opera silently replaced Presto with WebKit?

With above data, I think for now I will target the copy paste feature only for Chrome, Safari and Opera. I definitely need to use different approach for Internet Explorer and Firefox. But that maybe for another blog post in the future.