[pve-devel] [PATCH manager v2 1/2] ui: form: add TwoColumnContainer

[Dominik Csapak]

this is a container, showing a widget on the left column and another one
on the right one, with a (default) flex ratio of 1:2

this is helpful when wanting fields to align vertically in an input
panel that have different height (e.g. because of text wrapping)

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
changes from v1:
* make the container more generic as a simple container that holds two
  widgets, so it can be useful in more situations

 www/manager6/Makefile                   |  1 +
 www/manager6/form/TwoColumnContainer.js | 53 +++++++++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 www/manager6/form/TwoColumnContainer.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 66ad35b8..36f85b30 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -89,6 +89,7 @@ JSSRC= 							\
 	form/MultiFileButton.js				\
 	form/TagFieldSet.js				\
 	form/IsoSelector.js				\
+	form/TwoColumnContainer.js			\
 	grid/BackupView.js				\
 	grid/FirewallAliases.js				\
 	grid/FirewallOptions.js				\
diff --git a/www/manager6/form/TwoColumnContainer.js b/www/manager6/form/TwoColumnContainer.js
new file mode 100644
index 00000000..7b5f67e7
--- /dev/null
+++ b/www/manager6/form/TwoColumnContainer.js
@@ -0,0 +1,53 @@
+// This is a container intended to show a field on the first column and one on
+// the second column. One can set a ratio for the field sizes.
+//
+// Works around a limitation of our input panel column1/2 handling that entries
+// are not vertically aligned when one of them has wrapping text (like it
+// happens sometimes with such longer descriptions)
+Ext.define('PVE.form.TwoColumnContainer', {
+    extend: 'Ext.container.Container',
+    alias: 'widget.pveTwoColumnContainer',
+
+    layout: {
+	type: 'hbox',
+	align: 'stretch',
+    },
+
+    // the default ratio of end to start widget
+    // does not have to be an integer value
+    widgetRatio: 2,
+
+    // the config of the first widget
+    startWidget: undefined,
+
+    // the config of the second widget
+    endWidget: undefined,
+
+    // same as fields in a panel
+    padding: '0 0 5 0',
+
+    initComponent: function() {
+	let me = this;
+
+	if (!me.startWidget) {
+	    throw "no start widget configured";
+	}
+
+	if (!me.endWidget) {
+	    throw "no end widget configured";
+	}
+
+	Ext.apply(me, {
+	    items: [
+		Ext.applyIf({ flex: 1 }, me.startWidget),
+		{
+		    xtype: 'box',
+		    width: 20,
+		},
+		Ext.applyIf({ flex: me.widgetRatio }, me.endWidget),
+	    ],
+	});
+
+	me.callParent();
+    },
+});
-- 
2.39.2