This adds two key features to Sencha Designer:
Sencha Designer is a powerful and invaluable development environment for Sencha Touch and ExtJS. Today Sencha Designer properties can only be literals. Also some property values are either controlled by Designer or cannot by typed due to the interface (e.g. Booleans).
- 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.