this is a field container, showing a field on the left column and a
description on the right one, with a (default) flex ratio of 1:2
this is helpful when wanting a longer description on the right column
but still have the fields aligned.
Signed-off-by: Dominik Csapak <d.csa...@proxmox.com>
---
alternatively, we could make a more generic '2column' container, where
we give a 'leftFieldConfig' and a 'rightFieldConfig', and just
let the user put in a displayfield on the right?
would be the more generic solution that could also work when we don't
want to have a description in the right column
www/manager6/Makefile | 1 +
.../form/DescriptionFieldContainer.js | 69 +++++++++++++++++++
2 files changed, 70 insertions(+)
create mode 100644 www/manager6/form/DescriptionFieldContainer.js
diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 66ad35b8..8a2d203b 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -89,6 +89,7 @@ JSSRC=
\
form/MultiFileButton.js \
form/TagFieldSet.js \
form/IsoSelector.js \
+ form/DescriptionFieldContainer.js \
grid/BackupView.js \
grid/FirewallAliases.js \
grid/FirewallOptions.js \
diff --git a/www/manager6/form/DescriptionFieldContainer.js
b/www/manager6/form/DescriptionFieldContainer.js
new file mode 100644
index 00000000..87e89262
--- /dev/null
+++ b/www/manager6/form/DescriptionFieldContainer.js
@@ -0,0 +1,69 @@
+// This is a field container intended to show a field on the first column and
+// it's description on the second column. One can set a ratio for description
+// size to field size.
+//
+// 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.DescriptionFieldContainer', {
+ extend: 'Ext.form.FieldContainer',
+ alias: 'widget.pveDescriptionFieldContainer',
+
+ layout: {
+ type: 'hbox',
+ align: 'stretch',
+ },
+
+ // the default ratio of description to field
+ // does not have to be an integer value
+ descriptionRatio: 2,
+
+ // the xtype of the field
+ fieldType: undefined,
+
+ // the description to show
+ description: undefined,
+
+ initComponent: function() {
+ let me = this;
+
+ if (!me.fieldType) {
+ throw "no field type set";
+ }
+
+ if (!me.description) {
+ throw "no description set";
+ }
+
+ let fieldConfig = {
+ xtype: me.fieldType,
+ bind: {},
+ name: me.name,
+ flex: 1,
+ padding: '0 10 0 0',
+ };
+ Ext.applyIf(fieldConfig, me.initialConfig);
+
+ // so we won't accidentally queried by name
+ delete me.name;
+ delete me.reference;
+
+ // so we won't show it twice
+ delete me.fieldLabel;
+ delete me.autoEl;
+
+ Ext.apply(me, {
+ items: [
+ fieldConfig,
+ {
+ xtype: 'displayfield',
+ value: Ext.htmlEncode(me.description),
+ flex: me.descriptionRatio,
+ padding: '0 0 0 10',
+ },
+ ],
+ });
+
+ me.callParent();
+ },
+});
--
2.39.2
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
