PDA

View Full Version : What is the XTemplate Ext.util.Format function usage for "{.}"?



cmeans
27 Oct 2013, 7:46 AM
ExtJS v4.1.3

I have a custom Ext.util.Format function, which I want to consume within a template like this:


tpl:[ '{.:address()}' ]

however, I only seem to be able to apply the format function on a named value:


tpl:[ '{location:address()}' ]


Is that a "bug", or is there some other way I should be doing it? (I'd simply like to avoid having to create a named property as the updated value is already an object.)

Thanks.

-Chris

ettavolt
28 Oct 2013, 3:42 AM
You can try '[{fm.address(values)}]'.

cmeans
28 Oct 2013, 9:58 AM
No, that didn't work either.

skirtle
28 Oct 2013, 10:11 AM
Testing using 4.1.1 and 4.2.1, the following works for me with XTemplate:


new Ext.XTemplate('Hello {.:uppercase}').apply('Gary');

It doesn't seem to work with an Ext.Template, though it isn't clear from your example which type of template you are using.

cmeans
28 Oct 2013, 12:49 PM
I'm just using the tpl property of a box (xtype). I don't know which type of template is used under-the-hood.

FYI: I tried your CTemplate stuff out a short-while-ago, but didn't seem to want to work in my scenario (a button in a dataview)...I was probably just using it wrong :)

-Chris

skirtle
28 Oct 2013, 1:11 PM
That should be an XTemplate but you can make sure by passing in an instance rather than just a string array.

You could also try confirming my observations for the example I gave.

An example of using CTemplate for buttons in a dataview:


var tpl = new Skirtle.CTemplate(
'<div style="font-weight: bold">DataView:</div>',
'<tpl for=".">',
'<div class="item" style="padding: 5px;">{button}</div>',
'</tpl>'
);

Ext.define('MyView', {
extend: 'Ext.view.View',

initComponent: function() {
this.comps = [];
this.callParent();
},

listeners: {
beforedestroy: function(view) {
Ext.destroy(view.comps);
},

beforerefresh: function(view) {
Ext.destroy(view.comps);
}
},

prepareData: function(data) {
this.callParent(arguments);

this.comps.push(data.button = new Ext.button.Button({text: data.text}));

return data;
}
});

new MyView({
itemSelector: 'item',
margin: 5,
tpl: tpl,
renderTo: Ext.getBody(),
width: 300,

store: {
autoLoad: true,
data: [{text: 'Red'}, {text: 'Green'}, {text: 'Blue'}],
fields: ['text']
},

style: {
backgroundColor: '#eee',
border: '1px solid #ccc'
}
});

cmeans
28 Oct 2013, 4:43 PM
Confirmed to not work even with an XTemplate instance.

skirtle
29 Oct 2013, 1:14 AM
But what about the test case I gave? What happens if you run this in the console?


new Ext.XTemplate('Hello {.:uppercase}').apply('Gary');

If that works then it confirms that the problem is not as simple as XTemplates not supporting formats with dot notation. If so then you'll need to spend some time experimenting to find what combination of factors do lead to a failure.

Without a complete, minimal test case we can only speculate.

cmeans
11 Nov 2013, 5:15 PM
Your example below is working fine (thanks!) I guess I didn't see it when I looked last.

I am encountering one issue...there's a few cases, where i'm creating around 300 buttons via this template...and IE10 is freezing (and giving the standard there's a "long running script").

I've tried using Ext.suspendLayouts() and Ext.resumeLayouts(true) to little effect...can you suggest the correct events of a dataview for me to use these calls in, or a better way to handle the situation?

The obvious answer is to not use buttons, and create simpler markup...unfortunatley, we have some fancy buttons, which will take longer to create simplified markup for.



An example of using CTemplate for buttons in a dataview:


var tpl = new Skirtle.CTemplate(
'<div style="font-weight: bold">DataView:</div>',
'<tpl for=".">',
'<div class="item" style="padding: 5px;">{button}</div>',
'</tpl>'
);

Ext.define('MyView', {
extend: 'Ext.view.View',

initComponent: function() {
this.comps = [];
this.callParent();
},

listeners: {
beforedestroy: function(view) {
Ext.destroy(view.comps);
},

beforerefresh: function(view) {
Ext.destroy(view.comps);
}
},

prepareData: function(data) {
this.callParent(arguments);

this.comps.push(data.button = new Ext.button.Button({text: data.text}));

return data;
}
});

new MyView({
itemSelector: 'item',
margin: 5,
tpl: tpl,
renderTo: Ext.getBody(),
width: 300,

store: {
autoLoad: true,
data: [{text: 'Red'}, {text: 'Green'}, {text: 'Blue'}],
fields: ['text']
},

style: {
backgroundColor: '#eee',
border: '1px solid #ccc'
}
});

skirtle
11 Nov 2013, 5:32 PM
Try using the profiler in Chrome to figure out where the bottlenecks are. It should lead you straight to the right point to add suspend/resume calls.

I have been experimenting recently with the following change to CTemplate, which may help:


injectComponents: function() {
var me = this,
...
placeholderEl;

Ext.suspendLayouts();

// Iterate backwards because we remove some elements in the loop
for ( ; index >= 0 ; --index) {
...
}

Ext.resumeLayouts(true);

if (ids.length) {
// Some components have not been injected. Polling acts both to do deferred injection and as a form of GC
me.doPolling(me.pollInterval * 1.5);
}
},

The two most likely places to see performance problems in CTemplate are injectComponents or the apply function defined in the class callback. Either way the culprit should fall out straight away from a bit of profiling.

cmeans
11 Nov 2013, 7:03 PM
Yes, you were absolutely correct.

Once I made your suggested modifications, the time spent inside that routine went from 11% down to 4%.

Rendering (in IE10) is still a bit slower than I'd prefer, but it's fast enough, and doesn't cause the browser to ...so it's great progress.

Thanks for your help!

-Chris