PDA

View Full Version : Extjs button with ZeroClipboard Functionality



manish.sharma1992
6 Nov 2014, 4:28 AM
Hi,

I am devloping a functionality of "Copy to Clipboard" wherein I am creating SQL Editor, I am done with creating SQL Editor, but I am facing issues of copying the SQL which is in my textarea to the clipboard.

I have created a seperate ux functionality for copy-to-clipboard functionality. Below is my code.


/**
* CopyToClipboard - Clipboard Copy Button
* Version 1.0
* Manish Sharma
*/


/*
* CopyToClipboard provides an easy way to copy text to the clipboard using an invisible
* Adobe Flash movie and a ExtJS 4.2.1 interface & ZeroClipboard library. The "Zero" signifies that the library
* is invisible and the user interface is left entirely up to you
*
* Requirement
* 1. Adobe Flash Flash Player Flash 9, 10
* 2. Extjs 4.2.1
* 3. ZeroClipBoard.js
*/


Ext.define('Ext.ux.clipboard.CopyToClipboard', {
extend: 'Ext.button.Button',
alias: ['widget.icopyclip', 'widget:copytoclipboard'],
alternateClassName : ['Ext.ux.CopyToClipboard'],

/**
* @cfg {String} value The value which is copied to the clipboard when the button is pressed
*/
// private
initComponent: function() {
Ext.ux.clipboard.CopyToClipboard.superclass.initComponent.call(this);
this.cls = this.ctCls;
this.clip = new ZeroClipboard.Client();
console.log('ZERO CLIPBOARD');
console.log(this.clip);
},

// private
afterRender: function() {
Ext.ux.clipboard.CopyToClipboard.superclass.afterRender.call(this);
this.clip.glue(this.getEl().dom);
this.clip.hide();
this.clip.addEventListener('mouseOver', this.clipMouseOver.createDelegate(this));
this.clip.addEventListener('mouseOut', this.clipMouseOut.createDelegate(this));
this.clip.addEventListener('mouseDown', this.clipMouseDown.createDelegate(this));
this.clip.addEventListener('mouseUp', this.clipMouseUp.createDelegate(this));
},

// private
onDestroy: function() {
this.clip.destroy();
Ext.ux.clipboard.CopyToClipboard.superclass.onDestroy.call(this);
},

// private
onMouseOver: function() {
if (!this.disabled) {
this.clip.show();
}
},

// private
clipMouseDown: function() {
this.getClickEl().addClass('x-btn-click');
this.clip.setText(this.getValue());
Ext.getDoc().on('mouseup', this.clipMouseUp, this);
},

// private
clipMouseUp: function() {
Ext.getDoc().un('mouseup', this.clipMouseUp, this);
this.getClickEl().removeClass('x-btn-click');
this.focus();
this.fireEvent('click', this);
},

// private
clipMouseOver: function() {
if (!this.disabled) {
this.el.addClass('x-btn-over');
this.fireEvent('mouseover', this);
}
},

// private
clipMouseOut: function() {
this.clip.hide();
if (!this.disabled) {
this.el.removeClass('x-btn-over');
this.fireEvent('mouseout', this);
}
},

/**
* Sets the value that should be used when the button is pressed
* @param {String} value The value to set
*/
setValue: function(value) {
this.value = String(value);
},


/**
* Get the value that will be used when the user clicks the button
* @return {String} value The value used to copy to the clipboard
*/
getValue: function() {
return this.value;
}
});


In my index.html file I am referring ZeroClipboard.js as below


<script type="text/javascript" src="app/ux/ZeroClipboard.js"></script>

And here is my copy-to-clipboard button which I have created.




xtype: 'container',
layout: {
type: 'fit'
},
items: [{
xtype: 'header',
cls : 'sql-header',
items: [{
xtype: 'label',
text: 'SQL Statement',
cls: 'label'
}]
},{
xtype: 'panel',
width: screen.width*1,
height: screen.height*0.40,
margin: '0 8 8 8',
items: [{
xtype: 'textarea',
id : 'sqlQuery',
disabled: true,
width: screen.width*1,
height: screen.height*0.40,
fieldStyle: 'border-radius: 5px; font-weight:bold; font-family: Times New Roman; font-size: 13px; line-height: 1.5em',
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: ['->',{
xtype : 'icopyclip',
iconCls: 'icon-duplicate'
}]
}]
}]


I am getting the following issue, which I have attached a snapshot with this query.

Kindly help :((

Thanks in Advance.

slemmon
7 Nov 2014, 5:48 PM
ZeroClipboard is a bit outside the scope of Sencha support and I'm afraid I have no experience with it personally. I'll defer to the community on this one.

manish.sharma1992
11 Nov 2014, 1:18 AM
Hi slemmon (http://www.sencha.com/forum/member.php?67514-slemmon) ,

Thanks for your immediate reply. Do we have some work around for this.:-/