From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: 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)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id F0A5777E0D for ; Mon, 25 Oct 2021 11:05:45 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id E66F320BA8 for ; Mon, 25 Oct 2021 11:05:45 +0200 (CEST) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS id 3269D20B9A for ; Mon, 25 Oct 2021 11:05:45 +0200 (CEST) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 00EA845E7F for ; Mon, 25 Oct 2021 11:05:45 +0200 (CEST) Message-ID: <19b746d7-4c16-95b8-96d3-2d2cd38ac260@proxmox.com> Date: Mon, 25 Oct 2021 11:05:42 +0200 MIME-Version: 1.0 User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:94.0) Gecko/20100101 Thunderbird/94.0 Content-Language: en-GB To: Proxmox VE development discussion , Dominik Csapak References: <20211025072626.1005625-1-d.csapak@proxmox.com> From: Thomas Lamprecht In-Reply-To: <20211025072626.1005625-1-d.csapak@proxmox.com> Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 7bit X-SPAM-LEVEL: Spam detection results: 0 AWL 1.848 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment NICE_REPLY_A -3.33 Looks like a legit reply (A) SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: Re: [pve-devel] [PATCH widget-toolkit] cbind: document cbind by adding a small summary and example X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Mon, 25 Oct 2021 09:05:46 -0000 On 25/10/2021 09:26, Dominik Csapak wrote: > Explain the use-case, the difference to normal binds, and give an > example that contains all features that can be used with explanations. great, thanks for that! > Signed-off-by: Dominik Csapak > --- > src/mixin/CBind.js | 78 ++++++++++++++++++++++++++++++++++++++++++++++ > 1 file changed, 78 insertions(+) > > diff --git a/src/mixin/CBind.js b/src/mixin/CBind.js > index 8b4153c..71c0b56 100644 > --- a/src/mixin/CBind.js > +++ b/src/mixin/CBind.js > @@ -1,3 +1,81 @@ > +/* > + * The Proxmox CBind mixin is intended to supplement the 'bind' mechanism > + * of ExtJS. In contrast to the 'bind', 'cbind' only act during creation > + * of the component, not during its lifetime. Maybe add something like: "It's applied only once just before the initComponent method of the component is executed, that means you only have a very basic object from the previous steps of the constructor available." > + * > + * It is used to dynamically set properties of components during their > + * creation (like a 'nodename' for example), but not later. It is also no > + * 'double-bind', meaning that a field which has its value 'cbind' will > + * not change the value of the 'cbind' when the value of the field changes. That second sentence is rather a bit confusing to me, also not sure if this mixes double binding and dynamic updates? "After creation there's no > + * > + * We use it to get a 'declarative' approach to component declaration, even I'd avoid "we" and rather tell the reader what they can do with it, e.g., here: You can use it... > + * when we need to set some properties of sub-components dynamically. > + * This reduces the code in the 'initComponent' and instead we can statically > + * declare items,buttons,tbars, etc. with the dynamic parts in the 'cbind'. missing spaces in the comma-separated list? and this paragraph shares some redundancy with the former, maybe merge them and add some info about getter "formulas", boolean negation, and object child element access here, so that the text doc is a bit more complete and the comments in the example can be a bit shorter. Throwing in a sentence about cbind propagation could be also worth it, as it can be a source of confusion. Maybe something like: "cbind's are applied recursively on any child object or array elements that have an .xtype or .cbind property, propagation stops if there is neither of those properties on a level, even if deeper level would define such properties again. You can add an empty object as `cbind` property if you want to force the mixin to descend into such a sub-tree" (fyi: just wrote that down with not much spell/grammar checking and could be possibly formulated in a simpler way) > + * > + * It is used like in the following example: > + * > + * Ext.define('Some.Component', { > + * extend: 'Some.other.Component', > + * > + * // first it has to be enabled > + * mixins: ['Proxmox.Mixin.CBind'], > + * > + * // then a base config has to be defined. this can be a function, > + * // which has access to the initial config and can store persistent > + * // properties, as well as return temporary ones (which only exist during > + * // the cbind process) > + * // this function will be called before 'initComponent' > + * cbindData: function(initialconfig) { > + * // 'this' here is the same as in 'initComponent' > + * let me = this; > + * me.persistentProperty = false; > + * return { > + * temporaryProperty: true, > + * }; > + * }, > + * > + * // if there is no need for persistent properties, > + * // it can also simply be an object early new-lined comment > + * cbindData: { > + * temporaryProperty: true, > + * // properties itself can also be functions that will be evaluated > + * // before replacing the values > + * dynamicProperty: (cfg) => !cfg.temporaryProperty, > + * // they can be any value > + * numericProp: 0, > + * // even objects > + * objectProp: { > + * foo: 'bar', > + * bar: 'baz', > + * } > + * }, > + * > + * // you can 'cbind' the component itself, here the 'target' property > + * // will be replaced with the content of 'temporaryProperty' (true) > + * // before the component is initialized > + * cbind: { > + * target: '{temporaryProperty}', > + * }, > + * > + * // you can also 'cbind' values of nested items/etc. like this > + * items: [ > + * { > + * xtype: 'checkbox', > + * cbind: { > + * // you can negate a property with prefixing '!' > + * value: '{!persistentProperty}', > + * // access to properties of objects can be done like this .. can be done with the point notation > + * object: '{objectProp.foo}' > + * // and it can be a function too, when you need more > + * // complicated logic ('dynamic' will get set to 1 here) Maybe write: Could be worth to mention that in the text before the example. "you can also use a getter function, modelled after the formulas of ExtJS's bind" > + * dynamic: (get) => get('numericProp') + 1, > + * }, > + * }, > + * ], > + * }); > + */ > + > Ext.define('Proxmox.Mixin.CBind', { > extend: 'Ext.Mixin', > >