From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <root@dev.dominic.proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68])
(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
key-exchange X25519 server-signature RSA-PSS (2048 bits) server-digest SHA256)
(No client certificate requested)
by lists.proxmox.com (Postfix) with ESMTPS id 3AEC460CF3
for <pve-devel@lists.proxmox.com>; Fri, 27 Nov 2020 12:08:21 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id 30DCC1B04E
for <pve-devel@lists.proxmox.com>; Fri, 27 Nov 2020 12:08:21 +0100 (CET)
Received: from dev.dominic.proxmox.com (212-186-127-178.static.upcbusiness.at
[212.186.127.178])
by firstgate.proxmox.com (Proxmox) with ESMTP id 1DD051B042
for <pve-devel@lists.proxmox.com>; Fri, 27 Nov 2020 12:08:20 +0100 (CET)
Received: by dev.dominic.proxmox.com (Postfix, from userid 0)
id E9AEF22696; Fri, 27 Nov 2020 12:08:19 +0100 (CET)
From: =?UTF-8?q?Dominic=20J=C3=A4ger?= <d.jaeger@proxmox.com>
To: pve-devel@lists.proxmox.com
Date: Fri, 27 Nov 2020 12:08:12 +0100
Message-Id: <20201127110812.102886-1-d.jaeger@proxmox.com>
X-Mailer: git-send-email 2.20.1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results: 1
AWL -0.684 Adjusted score from AWL reputation of From: address
KAM_ASCII_DIVIDERS 0.8 Spam that uses ascii formatting tricks
KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
KAM_LAZY_DOMAIN_SECURITY 1 Sending domain does not have any anti-forgery
methods
KHOP_HELO_FCRDNS 0.274 Relay HELO differs from its IP's reverse DNS
NO_DNS_FOR_FROM 0.379 Envelope sender has no MX or A DNS records
SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record
SPF_NONE 0.001 SPF: sender does not publish an SPF Record
Subject: [pve-devel] [PATCH widget-toolkit] input panel: Add drawing of
layout
X-BeenThere: pve-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox VE development discussion <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Fri, 27 Nov 2020 11:08:21 -0000
The drawing makes clear in a few seconds:
- what columnT and columnB stand for
- what additional containers and panels are created
- to which of those the elements of column1, column2... go to
When you're in the JS debugger and lost overview of where in this
element hierarchy you are, you can quickly check xtype + layout. Then
consulting this drawing solves the mistery.
Signed-off-by: Dominic Jäger <d.jaeger@proxmox.com>
---
IMO it's not that easy/quick to see where everything goes to.
initComponent is not that short. I actually drew the layout on paper
to keep an overview while reading it.
There was a drawing already in the commit message of
455f5fe input panel: support convenience top column
so I assumed I'm not the only one who finds such a drawing useful and
it is easier to find here than in the commit message.
src/panel/InputPanel.js | 14 ++++++++++++++
1 file changed, 14 insertions(+)
diff --git a/src/panel/InputPanel.js b/src/panel/InputPanel.js
index 67f7352..a9c7263 100644
--- a/src/panel/InputPanel.js
+++ b/src/panel/InputPanel.js
@@ -76,6 +76,20 @@ Ext.define('Proxmox.panel.InputPanel', {
});
},
+ /**
+ * inputpanel, vbox
+ * +---------------------------------------------------------------------+
+ * | columnT |
+ * +---------------------------------------------------------------------+
+ * | container, hbox |
+ * | +---------------+---------------+---------------+---------------+ |
+ * | | column1 | column2 | column3 | column4 | |
+ * | | panel, anchor | panel, anchor | panel, anchor | panel, anchor | |
+ * | +---------------+---------------+---------------+---------------+ |
+ * +---------------------------------------------------------------------+
+ * | columnB |
+ * +---------------------------------------------------------------------+
+ */
initComponent: function() {
let me = this;
--
2.20.1