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.csa...@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 _______________________________________________ pve-devel mailing list pve-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel