Using custom property in a Template

Question

I have a custom field, which extends Ext.form.field.Text . My new field uses custom template, like so:

fieldSubTpl: [
    '<div class="uk-margin-medium-bottom"><div class="md-input-wrapper"><label for="{id}">{label}</label><input class="md-input" id="{id}" name="{name}" type="text" value="{value}" /><span class="md-input-bar "></span></div></div>',{
    compiled: true}
],

The problem is with this {label} property inside the template. If I check it in initComponent method like so:

...
initComponent: function() {
   console.log(this.label); // prints out some value
},
...

I see some value in the console. So, this property exists and the component sees it, however, I do not know how can I use it inside the template.

Answer 1

That happens because <label> and <input> tags are rendered separately.

Label is rendered using Labelable mixin . You can change it's render template using config labelableRenderTpl .

In case you still want to use fieldSubTpl to render everything at once, you should extend getSubTplData method of the component and append label value to returned object. This object will be passed to the fieldSubTpl template for render.

UPD. Example fiddle https://fiddle.sencha.com/#view/editor&fiddle/1ui1