[pve-devel] [PATCH widget-toolkit 2/5] webhook edit: make items config not static

[Dominik Csapak]

modifying static elements from the class, like done here with e.g.

 me.items[0][key] = value;

is dangerous, since it directly modifies the class definition of those
arrays/objects.

Instead move the definition in initComponent, which uses a fresh
declaration each time the component is initialized.

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 src/panel/WebhookEditPanel.js | 143 +++++++++++++++++-----------------
 1 file changed, 73 insertions(+), 70 deletions(-)

diff --git a/src/panel/WebhookEditPanel.js b/src/panel/WebhookEditPanel.js
index b440d7f..fcc5b06 100644
--- a/src/panel/WebhookEditPanel.js
+++ b/src/panel/WebhookEditPanel.js
@@ -318,90 +318,93 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
 	},
     },
 
-    items: [
-	{
-	    xtype: 'grid',
-	    reference: 'grid',
-	    minHeight: 100,
-	    maxHeight: 100,
-	    scrollable: 'vertical',
-
-	    viewConfig: {
-		deferEmptyText: false,
-	    },
-
-	    store: {
-		listeners: {
-		    update: function() {
-			this.commitChanges();
-		    },
-		},
-	    },
-	    margin: '5 0 5 0',
-	},
-	{
-	    xtype: 'button',
-	    text: gettext('Add'),
-	    iconCls: 'fa fa-plus-circle',
-	    handler: 'addLine',
-	},
-    ],
-
     initComponent: function() {
 	let me = this;
 
-	for (const [key, value] of Object.entries(me.gridConfig ?? {})) {
-	    me.items[0][key] = value;
-	}
-
-	me.items[0].columns = [
+	let items = [
 	    {
-		header: me.fieldTtitle,
-		dataIndex: 'headerName',
-		xtype: 'widgetcolumn',
-		widget: {
-		    xtype: 'textfield',
-		    isFormField: false,
-		    maskRe: me.maskRe,
-		    allowBlank: false,
-		    queryMode: 'local',
+		xtype: 'grid',
+		reference: 'grid',
+		minHeight: 100,
+		maxHeight: 100,
+		scrollable: 'vertical',
+
+		viewConfig: {
+		    deferEmptyText: false,
+		},
+
+		store: {
 		    listeners: {
-			change: 'itemChange',
+			update: function() {
+			    this.commitChanges();
+			},
 		    },
 		},
-		flex: 1,
-	    },
-	    {
-		header: me.fieldTtitle,
-		dataIndex: 'headerValue',
-		xtype: 'widgetcolumn',
-		widget: {
-		    xtype: 'proxmoxtextfield',
-		    inputType: me.maskValues ? 'password' : 'text',
-		    isFormField: false,
-		    maskRe: me.maskRe,
-		    queryMode: 'local',
-		    listeners: {
-			change: 'itemChange',
+		margin: '5 0 5 0',
+		columns: [
+		    {
+			header: me.fieldTtitle,
+			dataIndex: 'headerName',
+			xtype: 'widgetcolumn',
+			widget: {
+			    xtype: 'textfield',
+			    isFormField: false,
+			    maskRe: me.maskRe,
+			    allowBlank: false,
+			    queryMode: 'local',
+			    listeners: {
+				change: 'itemChange',
+			    },
+			},
+			flex: 1,
 		    },
-		    allowBlank: !me.isCreate && me.maskValues,
-
-		    bind: {
-			emptyText: '{record.emptyText}',
+		    {
+			header: me.fieldTtitle,
+			dataIndex: 'headerValue',
+			xtype: 'widgetcolumn',
+			widget: {
+			    xtype: 'proxmoxtextfield',
+			    inputType: me.maskValues ? 'password' : 'text',
+			    isFormField: false,
+			    maskRe: me.maskRe,
+			    queryMode: 'local',
+			    listeners: {
+				change: 'itemChange',
+			    },
+			    allowBlank: !me.isCreate && me.maskValues,
+
+			    bind: {
+				emptyText: '{record.emptyText}',
+			    },
+			},
+			flex: 1,
 		    },
-		},
-		flex: 1,
+		    {
+			xtype: 'widgetcolumn',
+			width: 40,
+			widget: {
+			    xtype: 'button',
+			    iconCls: 'fa fa-trash-o',
+			},
+		    },
+		],
 	    },
 	    {
-		xtype: 'widgetcolumn',
-		width: 40,
-		widget: {
-		    xtype: 'button',
-		    iconCls: 'fa fa-trash-o',
-		},
+		xtype: 'button',
+		text: gettext('Add'),
+		iconCls: 'fa fa-plus-circle',
+		handler: 'addLine',
 	    },
 	];
 
+	for (const [key, value] of Object.entries(me.gridConfig ?? {})) {
+	    items[0][key] = value;
+	}
+
+	Ext.apply(me, {
+	    items,
+	});
+
 	me.callParent();
 	me.initField();
     },
-- 
2.39.5