0

I've been trying for a few days to fill the selectfield's edge picker selector with an XTemplate like this one: <div>BONJOUR <br> {sNotificationTypeTitle}</div>

After many searches in the code database (picker.js, slot.js...), I found how to apply a TPL in the picker slots by replacing the createEdgePicker function like this:

createEdgePicker: function() {
    var me = this;

    var pickerSlot = {
        align: me.getPickerSlotAlign(),
        name: me.getValueField(),
        valueField: me.getValueField(),
        value: me.getValue(),
        store: me._pickerStore || me.getStore()
    }

    if (Ext.isEmpty(me.pickerTpl)) {
        pickerSlot.displayField = me.getDisplayField();
    }
    else {
        /**
         * ext/modern/modern/src/picker/Slot.js ligne 97
         * @cfg {String} itemTpl The template to be used in this slot.
         * If you set this, {@link #displayField} will be ignored.
         */
        pickerSlot.itemTpl = me.pickerTpl;
    }

    return Ext.merge({
        ownerCmp: me,
        slots: [pickerSlot],
        listeners: {
            change: me.onPickerChange,
            scope: me
        },
        setStore: function(store) {
            this.child('pickerslot').setStore(store);
        },
        deselectAll: function() {
            this.child('pickerslot').deselectAll();
        }
    }, me.getEdgePicker());
},

BUT it only works for TPL on one line, when I tried my final TPL, with
it doesn't work :

With <div>BONJOUR {sNotificationTypeTitle}</div>

enter image description here

With <div>BONJOUR <br> {sNotificationTypeTitle}</div>

enter image description here

Fiddle : https://fiddle.sencha.com/#view/editor&fiddle/2q4j

So if any of you have solved this problem using the same or another solution, please share it;)

I'm using ExtJS 6.6 with modern toolkit.

Enzo B.
  • 2,341
  • 1
  • 11
  • 33
  • Please create a fiddle to reproduce so people can help easily. If you create a fiddle [here](https://fiddle.sencha.com/#view/editor), maybe i can help. – abeyaz Feb 28 '19 at 13:55
  • Btw, your problem is possibly about css. Try to inspect your template div in chrome, especially `white-space`, `display` and `height` properties. Ext default dataview item height is probably preventing it to display multiline. – abeyaz Feb 28 '19 at 14:01
  • Thanks for help me, here was a fiddle : https://fiddle.sencha.com/#view/editor&fiddle/2q4j – Enzo B. Feb 28 '19 at 15:10

0 Answers0