How to change required field asterisk in ExtJs 4.2

Question

I need to change the position of the asterisk indicator of a required field (allowBlank: false) to before the field label. Just like the imagem bellow:

enter image description here

I can't find a proper way in sencha docs.

There a similar question here, but it does not work on ExtJs 4.2.

score 2 · Accepted Answer · answered Aug 20 '13 at 17:03

2

The bellow code snippet worked as I wanted to.

beforeLabelTextTpl: [
    '<tpl if="allowBlank == false">',
        '<span class="' + Ext.baseCSSPrefix + 'required">*</span>',
    '</tpl>'
]

answered Aug 20 '13 at 17:03

paulodiovani

1,208
2
16
34

nice. any idea how to make this template active after dynamically changing 'allowBlank'? Like when one field gets some value other becomes mandatory. – dpedro Jan 19 '15 at 09:55

score 1 · Answer 2 · edited Aug 20 '13 at 13:55

1

afterLabelTpl and afterLabelTextTpl were added in 4.1.0 and should do exactly what you need.

edited Aug 20 '13 at 13:55

paulodiovani

1,208
2
16
34

answered Aug 19 '13 at 20:19

dbrin

15,525
4
56
83

cool, glad was useful. by the way typically 'required' asterisks goes after the label. – dbrin Aug 20 '13 at 17:27
That is a suggestion of our web designer for acessibility. As her said, the required `asterisk` should come before the label for a screen reader checks first what fields are required. – paulodiovani Aug 21 '13 at 17:37

score 0 · Answer 3 · answered Dec 17 '15 at 11:24

0

 {
    xtype : 'label',
    html:'<span>First Name</span><span style="color: rgb(255, 0, 0); 
    padding-left: 2px;">*</span>',
    width:50,
 }

Try this out.

answered Dec 17 '15 at 11:24

Mayur Gite

397
4
16

How to change required field asterisk in ExtJs 4.2

3 Answers3