[pve-devel] [PATCH manager 1/2] add split button

Dominik Csapak d.csapak at proxmox.com
Mon Apr 4 12:35:23 CEST 2016


the same code base as our pveButton
(selectionchange handling, confirm,etc.)
but with a split button (a button with a menu)

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
the realHandler/handlerWrapper code is not really nice,
but i couldn't think of a better alternative,
plus it works ;)

 www/manager6/Makefile        |   1 +
 www/manager6/button/Split.js | 100 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 www/manager6/button/Split.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 2783f81..5b7f4bb 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -7,6 +7,7 @@ JSSRC= 				                 	\
 	StateProvider.js				\
 	button/Button.js				\
 	button/ConsoleButton.js				\
+	button/Split.js					\
 	qemu/SendKeyMenu.js				\
 	qemu/CmdMenu.js					\
 	qemu/TemplateMenu.js				\
diff --git a/www/manager6/button/Split.js b/www/manager6/button/Split.js
new file mode 100644
index 0000000..8ea65d2
--- /dev/null
+++ b/www/manager6/button/Split.js
@@ -0,0 +1,100 @@
+/* Button features:
+ * - observe selection changes to enable/disable the button using enableFn()
+ * - pop up confirmation dialog using confirmMsg()
+ *
+ *   does this for the button and every menu item
+ */
+Ext.define('PVE.button.Split', {
+    extend: 'Ext.button.Split',
+    alias: 'widget.pveSplitButton',
+
+    // the selection model to observe
+    selModel: undefined,
+
+    // if 'false' handler will not be called (button disabled)
+    enableFn: function(record) { },
+
+    // function(record) or text
+    confirmMsg: false,
+
+    // take special care in confirm box (select no as default).
+    dangerous: false,
+
+    handlerWrapper: function(button, event) {
+	var me = this;
+	var rec, msg;
+	if (me.selModel) {
+	    rec = me.selModel.getSelection()[0];
+	    if (!rec || (me.enableFn(rec) === false)) {
+		return;
+	    }
+	}
+
+	if (me.confirmMsg) {
+	    msg = me.confirmMsg;
+	    if (Ext.isFunction(me.confirmMsg)) {
+		msg = me.confirmMsg(rec);
+	    }
+	    Ext.MessageBox.defaultButton = me.dangerous ? 2 : 1;
+	    Ext.Msg.show({
+		title: gettext('Confirm'),
+		icon: me.dangerous ? Ext.Msg.WARNING : Ext.Msg.QUESTION,
+		msg: msg,
+		buttons: Ext.Msg.YESNO,
+		callback: function(btn) {
+		    if (btn !== 'yes') {
+			return;
+		    }
+		    me.realHandler(button, event, rec);
+		}
+	    });
+	} else {
+	    me.realHandler(button, event, rec);
+	}
+    },
+
+    initComponent: function() {
+	/*jslint confusion: true */
+
+        var me = this;
+
+	if (me.handler) {
+	    me.realHandler = me.handler;
+	    me.handler = me.handlerWrapper;
+	}
+
+	if (me.menu && me.menu.items) {
+	    me.menu.items.forEach(function(item) {
+		if (item.handler) {
+		    item.realHandler = item.handler;
+		    item.handler = me.handlerWrapper;
+		}
+
+		if (item.selModel) {
+		    me.mon(item.selModel, "selectionchange", function() {
+			var rec = item.selModel.getSelection()[0];
+			if (!rec || (item.enableFn(rec) === false )) {
+			    item.setDisabled(true);
+			} else {
+			    item.setDisabled(false);
+			}
+		    });
+		}
+	    });
+	}
+
+	me.callParent();
+
+	if (me.selModel) {
+
+	    me.mon(me.selModel, "selectionchange", function() {
+		var rec = me.selModel.getSelection()[0];
+		if (!rec || (me.enableFn(rec) === false)) {
+		    me.setDisabled(true);
+		} else {
+		    me.setDisabled(false);
+		}
+	    });
+	}
+    }
+});
-- 
2.1.4





More information about the pve-devel mailing list