Intelligent Properties Add-On for Sencha Designer

[froamer]

This adds two key features to Sencha Designer:

1. Expressions in property values
2. Override property values

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).

Placing expressions in properties allows their values to be calculated, derived from other properties or set from a function (local or external).

Releases
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...

intelligentProperties: true

set_intelligentProperties.png

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.

Expression Examples:

1. : 20*4 - the property value will be set to 80
2. : me.title+" beta" - the property value will be the existing title with a beta suffix
3. : Ext.util.Format(me.title) - the property value will be the title uppercased
4. : me.height*me.width - the property value will be set to the area

Overriding Properties
To override a property you add a new custom property with the same but prefixed with override_

Override Examples:

1. override_items: me.myItems() - sets the items property value to the return values of the myItems() function
2. override_maximizable: Ext.getOrientation() == "landscape" - only sets maximizable if the browser in in landscape mode.

Debugging
You can turn on debugging per-object by adding another custom field...

intelligentPropertiesDebug: true

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.

Notes
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.

Troubleshooting
If it isn’t working, here are a few things to check...

1. Are you loading the script immediately after Ext but before your application?
2. Have you remembered to add the custom property: intelligentProperties: true to the object?
3. Turn on debugging by adding a custom property: intelligentPropertiesDebug: true

Caveat
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!

Installing
Download the attached file and include it in your application directly after Ext and before your application files.
IntellegentProperties_v2.1.zip

[CaliLuke]

Wow, pretty impressive.

We'll make this unnecessary pretty soon, but in the meantime... wow!

[froamer]

Wow, pretty impressive.

We'll make this unnecessary pretty soon, but in the meantime... wow!

Thanks Luke, I'm glad to hear you are working on an official solution. Obviously supporting it natively in the Designer is far better. Does "pretty soon" mean a version 2 thing?

[CaliLuke]

Sometimes after GA, 2.x for sure but definitely not 2.0 (no time for that).

[froamer]

Sometimes after GA, 2.x for sure but definitely not 2.0 (no time for that).

Great news! We will use this in the meantime.

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...

A: 200
title: me.B*2
B: me.A

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.

[hotdp]

Will be good when this is possible. I also miss this "feature" it will make the designer much more flexibel.

[froamer]

Will be good when this is possible. I also miss this "feature" it will make the designer much more flexibel.

Hi hotdp, if you don't mind adjusting your projects when it is officially supported, feel free to use this add-on while waiting. I built this out of necessity when trying to create truly reusable classes in Designer. I found it impossible without the ability to pass on property values to children.

[Sottilde]

Thanks! I commented on your earlier version of this - this is pretty darned useful! Thanks for your hard work.