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>';
}
}
}
});

2024年React state management趨勢

輕量化 在過去Redux 是 React 狀態管理的首選函式庫。 Redux 提供了強大的功能和靈活性,但也帶來了一定的學習成本和複雜度。 隨著 React 生態的不斷發展,越來越多的開發者開始追求輕量化的狀態管理函式庫。 Zustand 和 Recoil 等庫以其簡單易用、性...