26 Mar 2012 10:57 AM #1
Intelligent Properties Add-On for Sencha Designer
This adds two key features to Sencha Designer:
- Expressions in property values
- Override property values
Placing expressions in properties allows their values to be calculated, derived from other properties or set from a function (local or external).
Version 2.1 - Fixed an issue when creating multiple instances
How to use
First you must turn on Intelligent Properties for your object. You do this by added a custom property...
This will turn on Intelligent Properties for this object and all its children.
Now you can use expressions in property values. You do this by prefixing your property value with a colon+space followed by your expression. If your expression includes me this will refer to the top level object as defined in the generated initComponent.
- : 20*4 - the property value will be set to 80
- : me.title+" beta" - the property value will be the existing title with a beta suffix
- : Ext.util.Format(me.title) - the property value will be the title uppercased
- : me.height*me.width - the property value will be set to the area
To override a property you add a new custom property with the same but prefixed with override_
- override_items: me.myItems() - sets the items property value to the return values of the myItems() function
- override_maximizable: Ext.getOrientation() == "landscape" - only sets maximizable if the browser in in landscape mode.
You can turn on debugging per-object by adding another custom field...
This will cause Intelligent Properties to output properties it adjusts to the browser's console. You can toggle either of these properties after they have been set.
Unless intelligentProperties: true is set as a custom property, no enhancements will be applied. The properties will be processed as before.
Expressions used in property values must be a valid expression following a return statement. Complex code is better written in a helper function.
This add-on works by overriding Ext.applyif and Ext.define. These are heavy traffic method but the code has been implemented so it only adds a single property check to objects that are not to be enhanced.
Since this overrides Ext.define, I have found no way to get this working when previewing from Sencha Designer, it will only work in your correctly configured application.
If a parent object is enhanced, it and its children will contain a new property called propertiesAdjusted. This will be true if any of that object's properties were adjusted or false if not.
If it isn’t working, here are a few things to check...
- Are you loading the script immediately after Ext but before your application?
- Have you remembered to add the custom property: intelligentProperties: true to the object?
- Turn on debugging by adding a custom property: intelligentPropertiesDebug: true
I am nothing to do with Sencha (other than being a huge fan and many years developer in their technologies).
I would love any suggestions for improving this. Hopefully one day it will become unnecessary and Sencha Designer will support these enhancements natively. In the meantime I hope you find it useful, let me know if you do.
Please bear in mind this does override base Ext methods and is therefore a bit of a hack. That said this has been done with care. This is provided under the GPL license with no warranty whatsoever, so use it at your own risk!
Download the attached file and include it in your application directly after Ext and before your application files.
26 Mar 2012 11:08 AM #2
Wow, pretty impressive.
We'll make this unnecessary pretty soon, but in the meantime... wow!--
26 Mar 2012 11:28 AM #3
26 Mar 2012 11:28 AM #4
Sometimes after GA, 2.x for sure but definitely not 2.0 (no time for that).--
26 Mar 2012 9:57 PM #5
I'm sure you guys have already got this covered, but here are some of the issues I had to resolve...
1) Dependent references need to be resolved repeatedly until all references are resolved...
2) Class properties need moving to Instance properties.
3) A debug option was essential to work out what was going on per object since the methods are heavy traffic.
4) This works prior to initComponent running so the properties resolve before they are used.
27 Mar 2012 1:35 AM #6
Will be good when this is possible. I also miss this "feature" it will make the designer much more flexibel.
27 Mar 2012 3:54 AM #7
30 Mar 2012 1:16 PM #8
Thanks! I commented on your earlier version of this - this is pretty darned useful! Thanks for your hard work.
14 Feb 2014 2:58 AM #9
Unfortunately though, there is still no way of setting a property value to the value of another property, or for property values to be evaluable.
I also discussed this in some detail in this thread: http://www.sencha.com/forum/showthread.php?187610 and created an extension for Ext Designer to work around this.
I think if we had this ability it would save me around 30% development time and 30% of code. We could also write better OO code.
Did this get forgotten or was it thrown out?