afterSubTpl in ComboBox

[darkhorni]

I'm trying to use afterSubTpl but I have no idea how to use it. This what I have tried so far.

{
    xtype: "combo",
    displayField: 'department_abvr',
    valueField: 'department_abvr',
    queryMode: 'local',
    typeAhead: true,
    forceSelection: true,
    fieldLabel: 'Department',
    name: 'department',
    store: departmentStore,
    allowBlank: false,
    afterSubTpl: '{department_name}'
}

What I'm missing here?

[Animal]

Nothing I think. I don't think we are supporting it properly.

Try this override

Ext.override('Ext.form.Labelable, {
    getLabelableRenderData: function() {
        var me = this,
            data,
            tempEl,
            topLabel = me.labelAlign === 'top';

        if (!Ext.form.Labelable.errorIconWidth) {
            tempEl = Ext.getBody().createChild({style: 'position:absolute', cls: Ext.baseCSSPrefix + 'form-invalid-icon'});
            Ext.form.Labelable.errorIconWidth = tempEl.getWidth() + tempEl.getMargin('l');
            tempEl.remove();
        }

        data = Ext.copyTo({
            inFormLayout   : me.ownerLayout && me.ownerLayout.type === 'form',
            inputId        : me.getInputId(),
            labelOnLeft    : !topLabel,
            hideLabel      : !me.hasVisibleLabel(),
            fieldLabel     : me.getFieldLabel(),
            labelCellStyle : me.getLabelCellStyle(),
            labelCellAttrs : me.getLabelCellAttrs(),
            labelCls       : me.getLabelCls(),
            labelStyle     : me.getLabelStyle(),
            bodyColspan    : me.getBodyColspan(),
            externalError  : !me.autoFitErrors,
            errorMsgCls    : me.getErrorMsgCls(),
            errorIconWidth : Ext.form.Labelable.errorIconWidth
        },
        me, me.labelableRenderProps, true);

        // Apply the renderData to the labelableRenderData
        Ext.apply(data, me.renderData);

        me.getInsertionRenderData(data, me.labelableInsertions);

        return data;
    }
});

And then configure your field with

        afterSubTpl: ['{department_name}'],
        renderData: {"department_name": "Department S"}