set AfterLabelTextTpl after form render

Question

I have a form with dynamic fields. In the afterrender event of the form I want to set the afterLabelTextTpl property. I can set this property but I can't see it change in my form. How can I achieve this?

Snippet:

listeners: {
    beforerender: function () {
        var fields = me.getForm().getFields();
        Ext.each(fields.items, function (f, idx) {
            f.afterLabelTextTpl = requiredTpl;

            console.log(f.afterLabelTextTpl);
        }); //eo Ext.each
    }
}

Edit:
I was looking for the beforerender method

@sunny Yes. No result on screen. Btw since Ext4 doLayout() is no longer required. — A1rPun, Oct 26 '12 at 07:25

score 3 · Answer 1 · answered Apr 18 '13 at 20:37

3

Try

f.labelEl.dom.innerHTML = "LABEL:<span style='color:red;font-weight:bold' data-qtip='Required'>*</span>";

answered Apr 18 '13 at 20:37

jprism

3,239
3
40
56

Wow, it's funny because I need this snippet today :) – A1rPun Apr 19 '13 at 09:17

score 1 · Accepted Answer · answered Oct 27 '12 at 00:09

1

You can not use this property after the component is already rendered. The initRenderTpl (which makes use of the label templates) method is run only if the component is not yet rendered. Once its rendered it will not run again.

You will need to update the DOM directly.

answered Oct 27 '12 at 00:09

dbrin

15,525
4
56
83

Alright, makes sense. `...getForm().getFields()` is not available before that so I need another way to get all fields. Do you know a way? – A1rPun Oct 29 '12 at 08:52
2

Not really. Are you sure getFields are not available in beforerender event? – dbrin Oct 29 '12 at 16:36

score 0 · Answer 3 · answered Jan 23 '14 at 15:47

I would recomend something like this in your form:

setRequired: function(field, index) {
    field.afterLabelTextTpl = requiredTpl;
},

initComponent: function(arguments) {
    var me = this;

    this.on('beforeadd', function(me, field){
        var fields;

        if (field.isXType('fieldset')) {
            fields = field.query('field');
            Ext.each(fields, me.setRequired);
        } else {
            me.setRequired(field);
        }
    });


    // rest of logic
    me.callParent(arguments);
},

set AfterLabelTextTpl after form render

3 Answers3