Page 1 of 2 12 LastLast
Results 1 to 10 of 11

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

  1. #1
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    117
    Answers
    3

    Question What is the XTemplate Ext.util.Format function usage for "{.}"?

    ExtJS v4.1.3

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

    Code:
    tpl:[ '{.:address()}' ]
    however, I only seem to be able to apply the format function on a named value:

    Code:
    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

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    574
    Answers
    59

    Default

    You can try '[{fm.address(values)}]'.

  3. #3
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    117
    Answers
    3

    Default

    No, that didn't work either.

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    Testing using 4.1.1 and 4.2.1, the following works for me with XTemplate:

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

  5. #5
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    117
    Answers
    3

    Default

    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

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    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:

    Code:
    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'
        }
    });

  7. #7
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    117
    Answers
    3

    Default

    Confirmed to not work even with an XTemplate instance.

  8. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    But what about the test case I gave? What happens if you run this in the console?

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

  9. #9
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    117
    Answers
    3

    Question

    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.

    Quote Originally Posted by skirtle View Post
    An example of using CTemplate for buttons in a dataview:

    Code:
    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'
        }
    });

  10. #10
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    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:

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

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •