Browse Source

grid复制

zhuth 7 years ago
parent
commit
a7c679addf

+ 10 - 61
frontend/saas-web/app/view/core/form/field/DetailGridField.js

@@ -29,9 +29,7 @@ Ext.define('saas.view.core.form.field.DetailGridField', {
 
     emptyRows: 5,
 
-    // Clearing selection disables the Actions.
     allowDeselect: true,
-    defaultActionType: 'button',
 
     initComponent: function() {
         var me = this;
@@ -46,45 +44,22 @@ Ext.define('saas.view.core.form.field.DetailGridField', {
         };
 
         Ext.apply(me, {
-            actions: {
-                copy: {
-                    iconCls: 'x-fa fa-copy',
-                    text: '复制单元格',
-                    handler: function() {
-                        me.onCopy(me.selectedData);
-                    }
-                }
-            },
-            plugins: {
-                cellediting: {
-                    clicksToEdit: 1,
-                    listeners: {
-                        edit: function(editor, context, eOpts) {
-                            context.column.fireEvent('edit', context.value);
-                        }
+            plugins: [{
+                ptype: 'cellediting',
+                clicksToEdit: 1,
+                listeners: {
+                    edit: function(editor, context, eOpts) {
+                        context.column.fireEvent('edit', context.value);
                     }
                 }
-            },
+            }, {
+                ptype: 'menuclipboard'
+            }],
             normalViewConfig: {
                 deferEmptyText: false,
                 emptyText: '无数据',
-                listeners: {
-                    itemcontextmenu: function(view, rec, node, index, e) {
-                        e.stopEvent();
-                        me.getContextMenu().show().setLocalXY(e.getXY());
-                        me.selectedData = e.target.innerText;
-                        return false;
-                    }
-                }
-            },
-            lockedGridConfig: {
-                // scrollable: {
-                //     x: false,
-                //     y: true
-                // }
             },
             lockedViewConfig: {
-                // scrollable: false,
                 scrollable: {
                     x: false,
                     y: true
@@ -536,31 +511,5 @@ Ext.define('saas.view.core.form.field.DetailGridField', {
             }
         });
         return trueData;
-    },
-
-    getContextMenu: function() {
-        var me = this;
-
-        return me.contextMenu || (me.contextMenu = me.add({
-            xtype: 'menu',
-            items: [
-                // Actions can be converted into MenuItems
-                '@copy',
-            ]
-        }));
-    },
-
-    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);
-	},
-
+    }
 });

+ 185 - 0
frontend/saas-web/ext/packages/ux/src/plugin/MenuClipboard.js

@@ -0,0 +1,185 @@
+Ext.define('Ext.ux.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', {
+			bodyCls:'copyMenu',
+			items: [{
+				copyType : 'cell',
+				iconCls : 'x-button-icon-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'
+		    // },{
+			// 	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);
+		    // 	}
+			// },{
+		    // 	xtype: 'menuseparator',cls:'x-copymenu-spt'
+		    // },{
+		    // 	text : '粘贴',
+		    // 	iconCls : 'x-button-icon-paste',
+		    // 	handler : function() {
+		    // 		me.onCellPaste();
+		    // 	}
+		    }]
+		});
+    },
+    
+    getCellText : function(grid, td, record, column, dataIndex, cell) {
+		var v = record.get(dataIndex), cv;
+		v = v || cell.textContent;
+        if(Ext.isDate(v)) {
+            cv = Ext.Date.format(v, column.format || Ext.Date.defaultFormat);
+        }else if(Ext.isNumber(v)) {
+            cv = v + '';
+        }else {
+            cv = v;
+        }
+		return cv;
+	},
+	
+	// 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 = me.getCellText(grid, td, record, column, dataIndex, cell);
+	// 			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);
+	},
+});