Results 1 to 3 of 3

Thread: List Template : tpl or itemTpl

  1. #1

    Default List Template : tpl or itemTpl

    Hi,

    I need to do special processing for record values before displaying them. I did not find a way to find a way to call function from within itemTpl. I found a suggestion to use tpl instead.
    However the fragment below does not generate any output. I feel I am doing something wrong, any suggestions on good Template overview and more complex case than just using record properties ?
    Thanks in advance.

    --eugene

    xtype: list,
    ...........
    itemTpl: new Ext.XTemplate (
    [
    '<tpl for=".">',
    '<div>',
    ' <div class="alerttitle">ABC</div>',
    ' <div class="alertamount">',
    '{text:this.getAmount}',
    ' ',
    ' </div>',
    ' </div>',
    '</tpl>'
    ],

    {
    getAmount: function(value){
    alert("foo");
    return "$2,345";
    }
    }

    ).compile(),

  2. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132

    Default

    If you want to call a function from within an itemTpl, you have to put the whole function call within [ ] braces.

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    San Antonio, TX
    Posts
    93
    Answers
    4

    Default

    like this:
    Code:
    var groupListTemplate = new Ext.XTemplate(
        '<div class="nav-product-list-item {selector}-bg">',
                '<div class="nav-group-left">',
                    '<tpl if="subtitle">',
                        '<h2>{subtitle}</h2>',
                    '</tpl>',
                '</div>',
                '<div class="nav-group-right">',
                    '<tpl for="attachments">',
                        '<tpl if="this.typeCheck(mime_type)">',
                            '<tpl if="images.retina.thumbnail.url">',
                                '<img src="{[this.getUri()]}/{images.retina.thumbnail.url}" width="{images.retina.thumbnail.width}" height="{images.retina.thumbnail.height}" />',
                            '</tpl>',
                        '</tpl>',        
                    '</tpl>',
                    '<h1>{title}</h1>',
                '</div>',
                '<div class="clear"></div>',
            '</div>',
            {
                //Check attachment type
                typeCheck: function(mime_type){
                    return mime_type == 'image/png';
                },
                getUri: function(){
                    return MYAPP.app.getApplication().getController('Main').doProvideUri();
                }
            }
    );

Posting Permissions

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