2012/05/09

[ExtJS 4.1] Mark a red Asterisk/Star on an Required Fields

Making a red asterisk on required fields makes your user realize they are not allowed to be blank by intuition. In ExtJS, you can specify fields which cannot be blank such as the following code.

            items : [ {     
                xtype : 'textfield',    
                fieldLabel : 'Name',
                allowBlank : false,               
            }, {
                xtype : 'numberfield',
                fieldLabel : 'Age'                  
            } ]

I found a patch working fine on ExtJS 4.07 to realize this requirement.

Ext.override(Ext.layout.Layout, {
    renderItem
: function(item, target, position) {
     
if (item && !item.rendered && item.isFieldLabelable && item.fieldLabel && item.allowBlank == false) {
        item
.fieldLabel += '<span class="req" style="color:red">*</span>';

     
}
     
this.callOverridden(arguments);
   
}
});

ExtJS 4.0 Mark a red Asterisk on an Required Field

Mark a red Asterisk on an Required Field on ExtJS 4.1

And I modify it a little bit to make it work in ExtJS 4.1 MVC application architecture as following.
this.control({
'field' : {
beforerender : function(thisField, eOpts) {
if (thisField && !thisField.rendered && thisField.isFieldLabelable && thisField.fieldLabel && thisField.allowBlank == false) {
thisField.fieldLabel += '<span class="req" style="color:red">*</span>';
}
}
}
});

2 則留言:

city 提到...

thanks for sharing.

六翼 提到...

Good, it does work.

台灣好行:後慈湖、大溪老街半日遊

要搭台灣好行 慈湖線 (票價100)的朋友,可以在【中壢火車前站】出口,往左邊直走5分鐘到【桃園客運總站】搭乘。搭車到最後一站【慈湖】後可以看到導覽服務站。後慈湖算是管制區,需要先 上網申請 才可以進入,如果是搭台灣好行的話,可以直接在服務站登記候補。假日通常都是人滿為患,建議如...