[pve-devel] [PATCH widget-toolkit] input panel: Add drawing of layout

[pve-devel] [PATCH widget-toolkit] input panel: Add drawing of layout

[Dominic Jäger]

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

[pve-devel] applied: [PATCH widget-toolkit] input panel: Add drawing of layout

[Thomas Lamprecht]

On 27.11.20 12:08, Dominic Jäger wrote:
> 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(+)
> 
>

applied, thanks!