Results 1 to 6 of 6

Thread: XTemplate, count not matching tpl and displayTpl

  1. #1
    Sencha User
    Join Date
    Apr 2017
    Posts
    4
    Answers
    1

    Default Answered: XTemplate, count not matching tpl and displayTpl

    Hi,

    I have a combobox with XTemplates attached to it, currently it looks like this:

    Code:
            tpl: Ext.create('Ext.XTemplate',
                '<ul class="x-list-plain"><tpl for=".">',
                    '<li role="option" class="x-boundlist-item">Call {#}</li>',
                '</tpl></ul>'
                ),
    
    
                displayTpl: Ext.create('Ext.XTemplate',
                '<tpl for=".">',
                    'Call {#}',
                '</tpl>'
    The dropdown/option select list works as intended but no matter what I try with {#} or xcount or xindex my displayTpl will always display "Call 1", instead of "Call 2" or "Call 3".

    Why?

    Can I somehow force the displayTpl to be that of the selected value from tpl?

  2. Quote Originally Posted by singelton View Post
    No, according to the docs "{#}" is a short-hand for "count" -
    https://docs.sencha.com/extjs/6.0.2/...ling-of-arrays

    • While processing an array, the special variable {#} will provide the current array index + 1 (starts at 1, not 0).

    But it looks like "tpl" is sending just the selected record for displayTpl to use so it will always be at 1. I'm guessing I'll have to copy the class and rewrite it.
    I solved it in another manner.

    Code:
    displayTpl: Ext.create('Ext.XTemplate',
                '<tpl for=".">',
                    'Call {[this.findIndexOfCall(values)]} {[values.isinbound ? "(Inbound)" : "(Outbound)"]}',
                '</tpl>',
                {
                    findIndexOfCall: function(v) {
                        var index = 0;
                        for (i = 0; i < ajaxData.length; i++) {
                            if (ajaxData[i].callid== v.callid) {
                                index = i;
                                break;
                            }
                        }
                        return index + 1;
                    }
    Just looping through the initial array that would become the store, find the correct index and increment it with 1. Perhaps not the most elegant solution but it works.

  3. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    You have a field in your store called '#'?

  4. #3
    Sencha User
    Join Date
    Apr 2017
    Posts
    4
    Answers
    1

    Default

    Quote Originally Posted by Gary Schlosberg View Post
    You have a field in your store called '#'?
    No, according to the docs "{#}" is a short-hand for "count" -
    https://docs.sencha.com/extjs/6.0.2/...ling-of-arrays

    • While processing an array, the special variable {#} will provide the current array index + 1 (starts at 1, not 0).

    But it looks like "tpl" is sending just the selected record for displayTpl to use so it will always be at 1. I'm guessing I'll have to copy the class and rewrite it.

  5. #4
    Sencha User
    Join Date
    Apr 2017
    Posts
    4
    Answers
    1

    Default

    Quote Originally Posted by singelton View Post
    No, according to the docs "{#}" is a short-hand for "count" -
    https://docs.sencha.com/extjs/6.0.2/...ling-of-arrays

    • While processing an array, the special variable {#} will provide the current array index + 1 (starts at 1, not 0).

    But it looks like "tpl" is sending just the selected record for displayTpl to use so it will always be at 1. I'm guessing I'll have to copy the class and rewrite it.
    I solved it in another manner.

    Code:
    displayTpl: Ext.create('Ext.XTemplate',
                '<tpl for=".">',
                    'Call {[this.findIndexOfCall(values)]} {[values.isinbound ? "(Inbound)" : "(Outbound)"]}',
                '</tpl>',
                {
                    findIndexOfCall: function(v) {
                        var index = 0;
                        for (i = 0; i < ajaxData.length; i++) {
                            if (ajaxData[i].callid== v.callid) {
                                index = i;
                                break;
                            }
                        }
                        return index + 1;
                    }
    Just looping through the initial array that would become the store, find the correct index and increment it with 1. Perhaps not the most elegant solution but it works.

  6. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Ah, right you are -- sorry for missing that. For what it's worth, it's working in this test case taken from the docs.
    https://fiddle.sencha.com/#view/editor&fiddle/1vfp

  7. #6
    Sencha User
    Join Date
    Apr 2017
    Posts
    4
    Answers
    1

    Default

    Quote Originally Posted by Gary Schlosberg View Post
    Ah, right you are -- sorry for missing that. For what it's worth, it's working in this test case taken from the docs.
    https://fiddle.sencha.com/#view/editor&fiddle/1vfp
    Ah, well not *really*. Try selecting an option - the displayed value will always be "Call 1".

Similar Threads

  1. tagfield displayTpl
    By nehadhiman in forum Ext JS 6.x Q&A
    Replies: 2
    Last Post: 16 Dec 2019, 9:26 PM
  2. Replies: 1
    Last Post: 21 Jan 2016, 4:34 PM
  3. Replies: 5
    Last Post: 16 Dec 2013, 9:47 PM
  4. displayTpl error
    By Ext4InAction in forum Ext: Discussion
    Replies: 0
    Last Post: 1 Jul 2011, 7:41 AM

Posting Permissions

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