PDA

View Full Version : Templates within designer



bhaidaya
3 Mar 2012, 6:09 PM
Is it possible to call functions within templates using the designer interface?

I'm trying to do something simple (outside of the designer interface ) but struggling to find the right place within the designer if any.

Displaying a list of images in an Ext.dataview.List based on a field value, while still displaying a default image if none is provided.

outside the interface you can just include something like this

var tpl = new Ext.XTemplate(
'<img class="photo" src="{ImageName:this.transformImage}" />',
{transformImage: function(value){return Ext.isEmpty(value) ? 'placeholder.jpg' : value;}
)

but inside the interface anything pasted into the field is scrubbed for quotes and other characters.

aconran
5 Mar 2012, 5:31 AM
Look for coming changes which will greatly improve templates.

When adding a template, you will get an additional node in the inspector. When clicking that node you will get a full blown code editor to edit your template's html.

You can also add Basic Functions to that template node to add methods like you have suggested above. Currently the best solution would be to do this in a subclassed/overridden approach.

bhaidaya
7 Mar 2012, 3:19 PM
Thanks! I'm really looking forward to this one...

Great job on the designer!

smokeman
9 May 2012, 6:03 AM
can you give an example of using the tpl config to add a function to that template?

MichelleWong
21 Jul 2012, 8:11 AM
i'm also looking for this, can someone help us with some example?
i would like to know how to call a function inside a tpl (like a the tpl in a list)

can someone provide us/me an example?

many thanks.

aconran
21 Jul 2012, 9:48 AM
The next minor version has the ability to add basic functions to individual templates.

The current version, you must add these to Ext.util.Format and then invoke them.

For example:


Ext.util.Format.yesNoFormat = function(bool) {
return bool ? 'Yes' : 'No';
};


Then in the template


{isActive:yesNoFormat}



If the function is directly added to the template itself you must prefix the function with this.


{isActive:this.yesNoFormat}

MichelleWong
21 Jul 2012, 3:07 PM
Thanks Aconran,

I had to make it work :)

Cheers~

Thanks for your example =D>