Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    54
    Vote Rating
    0
    c2c-guinness is on a distinguished road

      0  

    Default [FIXED-EXTJSIV-264] Combo Templates

    [FIXED-EXTJSIV-264] Combo Templates


    I've not been able to get combo templates to work using 'tpl' .. maybe I'm doing that wrong or something has changed.

    Either way though, something is broken in Ext as the example doesnt work. Look at the second combo, custom item templates. An abbreviation should be showing up there, and is not:

    http://dev.sencha.com/deploy/ext-4.0...rm/combos.html

  2. #2
    Sencha - Architect Dev Team jjohnston's Avatar
    Join Date
    Sep 2010
    Posts
    559
    Vote Rating
    19
    jjohnston will become famous soon enough jjohnston will become famous soon enough

      0  

    Default


    The old 'tpl' config has been changed, now you supply a getInnerTpl function as part of the listConfig configuration. The combos example was not updated to match this change (we're on it.)

    I'm looking into the sorting issue.

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    54
    Vote Rating
    0
    c2c-guinness is on a distinguished road

      0  

    Default


    I was trying to figure out what you meant by "listConfig". I notice the example does use innerTpl, and I'm guessing it should go inside of listConfig: {} but I could not find any reference to that.

    Since the PR5 combo documents are broken I was looking at PR4 but listConfig is not indicated.

    Could you please provide a quick example usage?

    Thanks,
    Luke

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    54
    Vote Rating
    0
    c2c-guinness is on a distinguished road

      0  

    Default


    Nevermind, I suppose it is as easy as it sounds:

    Code:
    this.myCombo = Ext.createWidget('combo', {
        ...
        listConfig: {
            getInnterTpl: function() {
                return "<div>... etc ...</div>";
            }
        }
    });
    But what about the combo display template? The value in the combo when the list is not expanded?

  5. #5
    Sencha - Architect Dev Team jjohnston's Avatar
    Join Date
    Sep 2010
    Posts
    559
    Vote Rating
    19
    jjohnston will become famous soon enough jjohnston will become famous soon enough

      0  

    Default


    Yup, you got it. Sorry about the broken docs formatting, we're fixing that. In the meantime you can click through to the source code (click the class name at the top of the doc page) and read the doc comments in there.

  6. #6
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    13
    Vote Rating
    0
    adamb500 is on a distinguished road

      0  

    Default


    Does this mean we have to return a string and not an XTemplate now?

  7. #7
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


    Yes, the returned String will be part of an XTemplate definition, see Ext.view.BoundList:55

    Code:
    me.tpl = Ext.create('Ext.XTemplate', 
                '<ul><tpl for=".">',
                    '<li role="option" class="' + itemCls + '">' + me.getInnerTpl(me.displayField) + '</li>',
                '</tpl></ul>'
            );
    The default implementation just renders the displayField:
    Code:
    getInnerTpl: function(displayField) {
            return '{' + displayField + '}';
        },

    Currently I can't see a good way to override the entire template definition (tpl) which was possible in Ext3.

    One should also not get confused by the docs inherited from AbstractView - itemTpl and tpl config options do not apply to BoundList since it overrides base class functionality as shown above.

  8. #8
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    Quote Originally Posted by mberrie View Post

    Currently I can't see a good way to override the entire template definition (tpl) which was possible in Ext3.
    It's not very clean, but you could do:

    1) Extend BoundList
    2) Override initComponent
    3) this.callParent(), then set this.tpl to a new XTemplate based on

    PHP Code:

            me
    .tpl Ext.create('Ext.XTemplate'
                
    '<ul><tpl for=".">',
                    
    '<li role="option" class="' itemCls '">' me.getInnerTpl(me.displayField) + '</li>',
                
    '</tpl></ul>'
            
    ); 
    4) Extend ComboBox
    5) override CreatePicker to basically copy it, and change the Ext.create for the picker to use your BoundList as the picker


    HTH

    stevil

  9. #9
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    Or, if you want this everywhere, you could just override BoundList and ComboBox. Easier, but not long on style points...

    stevil

  10. #10
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


    Thx for your reply.

    Both solutions massively violate my coding conduct

    When I ran into this yesterday, I decided to rewrite my CSS and go with the standard markup instead. Everything else gave me the willies.

    Haven't even looked as far as how to use a custom BoundList implementation in ComboBox. There should really be an easy way to override the implementing class when using composition. Duplicating the createPicker code could easily be avoided if the code delegated instantiation to a factory method , or - facilitating the Ext4 class loading pattern - just allow configuration of the class name as a config property.

    Admittingly, reconfiguring the tpl in BoundList after callParent wouldn't be THAT bad - just not very nice since we execute code and then throw away the result.

Similar Threads

  1. [FIXED-EXTJSIV-240] ReadOnly combo bug
    By wki01 in forum Ext:Bugs
    Replies: 1
    Last Post: 26 Mar 2011, 8:42 PM
  2. Combo with Templates and Ajax with RPC proxy
    By cutout33 in forum Ext GWT: Discussion
    Replies: 5
    Last Post: 2 Mar 2011, 3:08 PM
  3. Combo with Templates and Ajax: on mouse paste
    By Chamil in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 19 Jan 2010, 10:12 PM
  4. Combo with Templates and Ajax
    By gte619n in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 2 Apr 2009, 5:27 PM
  5. Help with combo box and templates
    By josh803316 in forum Ext 2.x: Help & Discussion
    Replies: 9
    Last Post: 18 Mar 2009, 12:08 AM

Thread Participants: 5