[FIXED-EXTJSIV-264] Combo Templates

[c2c-guinness]

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

[jjohnston]

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.

[c2c-guinness]

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

[c2c-guinness]

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

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?

[jjohnston]

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.

[adamb500]

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

[mberrie]

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

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:

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.

[stevil]

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

        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

[stevil]

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

stevil

[mberrie]

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.