Displayfield with template

2
votes

I'm trying to implement a tpl within a displayfield to display a list of data sent to the server from a textarea.

The same data is displayed in a grid with rowexpander plugin (display values in XTemplate like textarea format) Fiddle: https://fiddle.sencha.com/#fiddle/14sf

I tried something like this:

FIDDLE: https://fiddle.sencha.com/#fiddle/14t7 without sucess...

I tried every way I found to render a tpl unsuccessfully.

Display has a config tpl but it seems not work in my case...

I appreciate suggestions for resolving this issue

1
javascripttemplatesextjsextjs5
tpl config option is "inherited" from Ext.Component, but not used by displayfield. You could try fieldSubTpl. – Alexander
Thanks Alexander. In my app console.says: TypeError: Cannot read property 'dom' of null. I edited myfiddle – josei

1 Answers

2
votes

The displayfield also has renderer function. You can use it as in your grid:

//var is just for illustration of the issue
var vegetables_types = 'potatos\ncarrots\npumpkins';

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 450,
    height: 200,
    bodyPadding: 10,
    title: 'Template',
    items: [{
        xtype: 'displayfield',
        fieldLabel: 'TPL',
        name: 'vegetables_types',
        renderer: function(value, field) {
            this.rndTpl = this.rndTpl || new Ext.XTemplate('<div><div>' + '<b>Vegetables: </b><ul><li>{[values.vegetables_types.replace(/\\n/g, "<li/>")]}</li><ul>' + '</div></div>');

            return this.rndTpl.apply({
                vegetables_types: value
            });
        },
        listeners: {
            render: function(field, eOpts) {
                field.setValue('potatos\ncarrots\npumpkins')
            }
        }
    }],

});

https://fiddle.sencha.com/#fiddle/14il