grid 复制

app/view/grid/copyPaste/Panel.js

@@ -0,0 +1,75 @@
+Ext.define('uas.view.grid.copyPaste.Panel', {
+    extend: 'uas.view.grid.basic.Panel',
+    xtype: 'grid-copy-paste',
+
+    requires: [
+        'Ext.grid.plugin.CellEditing',
+        'Ext.grid.selection.SpreadsheetModel',
+        'Ext.ux.grid.plugin.MenuClipboard'
+    ],
+
+    plugins: [{
+        ptype: 'menuclipboard'
+    }, {
+        ptype: 'cellediting',
+        clicksToEdit: 2,
+    }],
+    
+    selModel: {
+        type: 'spreadsheet'
+    },
+
+    columns: [{
+        text: 'Company',
+        flex: 1,
+        dataIndex: 'name',
+        editor: {
+            xtype: 'textfield'
+        }
+    }, {
+        text: 'Price',
+        width: 95,
+        formatter: 'usMoney',
+        dataIndex: 'price',
+        editor: {
+            xtype: 'numberfield'
+        }
+    }, {
+        text: 'Change',
+        width: 80,
+        renderer: 'renderChange',
+        dataIndex: 'priceChange',
+        editor: {
+            xtype: 'numberfield'
+        }
+    }, {
+        text: '% Change',
+        width: 100,
+        renderer: 'renderPercent',
+        dataIndex: 'priceChangePct',
+        editor: {
+            xtype: 'numberfield'
+        }
+    }, {
+        text: 'Last Updated',
+        width: 115,
+        formatter: 'date("m/d/Y")',
+        dataIndex: 'priceLastChange',
+        editor: {
+            xtype: 'datefield'
+        }
+    }, {
+        xtype: 'actioncolumn',
+        width: 50,
+        menuDisabled: true,
+        sortable: false,
+
+        items: [{
+            iconCls: 'x-fa fa-check green',
+            handler: 'onApprove'
+        }, {
+            iconCls: 'x-fa fa-ban red',
+            handler: 'onDecline'
+        }]
+    }],
+});

resources/json/navigation.json

@@ -66,6 +66,7 @@
             {
                 "text": "复制/粘贴",
                 "leaf": true,
+                "target": "grid-copy-paste",
                 "iconCls": "x-fa fa-smile-o"
             },
             {

ux/grid/plugin/MenuClipboard.js

@@ -0,0 +1,184 @@
+Ext.define('Ext.ux.grid.plugin.MenuClipboard', {
+    extend: 'Ext.plugin.Abstract',
+    alias: 'plugin.menuclipboard',
+
+    copyCls : 'grid-copy',
+
+    formats: {
+        cell: {
+            get: 'getCells'
+        },
+        html: {
+            get: 'getCellData'
+        },
+        raw: {
+            get: 'getCellData',
+            put: 'putCellData'
+        }
+    },
+
+    constructor: function (config) {
+        if (config) {
+            this.pluginConfig = config;
+            this.cmp = config.cmp;
+            this.initConfig(config);
+        }
+    },
+
+    initConfig: function() {
+        var me = this;
+
+        me.applyEventListeners();
+
+        me.callParent(arguments);
+    },
+
+    isExecable: function() {
+		return Ext.isChrome && Number(Ext.userAgent.match(/chrome\/[\d.]+/gi)[0].replace(/[^0-9.]/ig,"").substring(0, 2)) > 42;
+	},
+
+    applyEventListeners: function() {
+        var me = this,
+        grid = me.cmp;
+
+        me.execable = me.isExecable();
+
+        grid.on({
+            cellcontextmenu (view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
+                e.stopEvent();
+                me.getContextMenu(view, td, cellIndex, record, tr, rowIndex, e, eOpts);
+                return false;
+            },
+        });
+    },
+
+    getContextMenu : function(view, td, colIdx, record, tr, rowIdx, e) {
+		var me = this,
+			grid = me.cmp,
+			column = view.getHeaderByCell(td) || view.ownerCt.headerCt.getHeaderAtIndex(colIdx);
+
+		if (!column) {
+			return;
+		}
+		var dataIndex = column.dataIndex;
+		e.preventDefault();
+	    var menu = view.copymenu;
+		if (!menu) {
+			menu = view.copymenu = me.createMenu();
+		}
+		menu.showAt(e.getXY());
+		// me.clearCopyCls();
+		menu.grid = grid;
+		menu.td = td,
+		menu.record = record;
+		menu.column = column;
+		menu.dataIndex = dataIndex;
+		menu.cell = view.getCell(menu.record, menu.column);
+		// menu.cell.addCls(me.copyCls);
+    },
+    
+    createMenu : function() {
+		var me = this;
+		return Ext.create('Ext.menu.Menu', {
+			cls: 'x-copy-menu',
+			items: [{
+				copyType : 'cell',
+				iconCls : 'x-fa fa-copy',
+				text : '复制',
+				handler: function(item) {
+					if(me.execable) {
+						var m = item.ownerCt;
+						me.onCopy(me.getCellText(m.grid, m.td, m.record, m.column, m.dataIndex, m.cell));
+					}
+				}
+			// },{
+			// 	copyType : 'row',
+			// 	text : '复制行',
+			// 	handler: function(item) {
+			// 		if(me.execable) {
+			// 			var m = item.ownerCt;
+			// 			me.onCopy(me.getRecordText(m.grid, m.td, m.record, m.column, m.dataIndex, m.cell));
+			// 		}
+			// 	}
+			// },{
+			// 	copyType : 'table',
+			// 	text : '复制表格',
+			// 	handler: function(item) {
+			// 		if(me.execable) {
+			// 			var m = item.ownerCt;
+			// 			me.onCopy(me.getTableText(m.grid));
+			// 		}
+			// 	}
+			// },{
+		    // 	xtype: 'menuseparator',cls:'x-copymenu-spt'
+		    // },{
+		    // 	xtype: 'menuseparator',cls:'x-copymenu-spt'
+		    // },{
+		    // 	text : '粘贴',
+		    // 	iconCls : 'x-button-icon-paste',
+		    // 	handler : function() {
+		    // 		me.onCellPaste();
+		    // 	}
+		    // }, {
+			// 	text : '粘贴行',
+			// 	handler : function(t, e) {
+			// 		var m = t.up('menu'),
+			// 		val = me.getCellText(m.grid, m.record, m.column, m.dataIndex);
+		    // 		m && me.onColumnPaste(val, m.grid, m.column, m.record, m.dataIndex, m.cell, e);
+		    // 	}
+			}]
+		});
+    },
+    
+    getCellText : function(grid, td, record, column, dataIndex, cell) {
+		var v = record.get(dataIndex);
+
+		if(v) {
+			if(Ext.isDate(v)) {
+				return Ext.Date.format(v, column.format || Ext.Date.defaultFormat);
+			}
+			return v;
+		}
+		return '';
+	},
+	
+	getRecordText : function(grid, td, record, column, dataIndex, cell) {
+		var me = this, s = [], columns = grid.headerCt.getGridColumns(), v = null;
+		Ext.each(columns, function(c){
+			if(!c.hidden && c.dataIndex && c.getWidth() > 0) {
+				v = record.get(c.dataIndex);
+				if(c == null) {
+					s.push(' ');
+				} else {
+					if(Ext.isDate(v)) {
+						s.push(Ext.Date.format(v, c.format || Ext.Date.defaultFormat));
+					} else {
+						s.push(v);
+					}
+				}
+			}
+		});
+		return s.join('\t');
+	},
+
+	getTableText : function(grid) {
+		var me = this, s = [];
+		grid.store.each(function(){
+			s.push(me.getRecordText(grid, this));
+		});
+		return s.join('\n');
+	},
+
+    onCopy: function(text) {
+		var target = Ext.DomHelper.append(document.body, {
+			tag: 'textarea',
+			style: 'opacity: 0;position: absolute;top: -10000px;right: 0;',
+			html: text
+		});
+		target.focus();
+		target.select();
+	    document.execCommand('Copy');
+	    target.blur();
+	    document.body.removeChild(target);
+	},
+});