extjs फ़ील्ड लेबल को रंग जोड़ें




(2)

मैं फ़ील्ड लेबल के बाद एक लाल तारांकन रखना चाहता हूं ताकि उपयोगकर्ता को फ़ील्ड भरना पड़े। क्या जेएस कोड में सीधे सीएसएस कोड जोड़ने का एक तरीका है? उदाहरण के लिए पैरामीटर शैली की तरह, लेकिन केवल तारांकन के लिए

var blablaField  = new Ext.form.TextField({
fieldLabel : 'Name *',
allowBlank : false,
width : 300
});

https://code.i-harness.com


आपके पास इस संग्रह के कम से कम तीन (आईएमओ) साफ़ तरीके हैं:

यह किसी भी क्षेत्र के लिए स्वचालित रूप से ऐसा करने के लिए है, जो आपको रिक्त करने की अनुमति नहीं देता है, आपको इस तरह एक कस्टम प्रपत्र एक्सटेंशन का उपयोग करना चाहिए।

Ext.define('Ext.ux.form', {
    extend: 'Ext.form.Panel',
    initComponent: function() {
      var me = this;
      me.on('beforeadd', function(form, field){
        if (!field.allowBlank)
          field.labelSeparator += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
      });
      me.callParent(arguments);
    }
});

यदि आप इसे केवल एक फ़ील्ड के लिए करना चाहते हैं तो आप afterLabelTextTpl या afterLabelTpl कॉन्फ़िग प्रॉपर्टी का उपयोग कर सकते हैं और ऐसा कुछ लागू कर सकते हैं

<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>

या आप इसे सीधे लेबल-टेक्स्ट में जोड़ सकते हैं

fieldLabel : 'Name<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>'

जहां सबसे पहले मैं सबसे ज्यादा पसंद करता हूं क्योंकि आपको आवश्यक ध्वज सेट करने की अपेक्षा करने के लिए कुछ भी नहीं करना पड़ता है

संपादित करें

यदि आप किसी भी क्षेत्र में एस्टरिक्स को लागू नहीं करना चाहते हैं, जो रिक्त होने की अनुमति नहीं देता है, तो यह फॉर्म में जोड़ा जाता है, तो आप एक नई प्रॉपर्टी जैसे skipLabelAppendix को लागू कर सकते हैं। आप इस संपत्ति को किसी भी क्षेत्र में सेट कर सकते हैं जिसे लेबल के बाद जोड़ा गया एस्टरिक्स नहीं मिलना चाहिए। और इसे इस तरह के रूप में शामिल करने के लिए मत भूलना

me.on('beforeadd', function(form, field){
    if (!field.allowBlank && !field.skipLabelAppendix)
       field.labelSeparator += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>';
      });

एक दृष्टिकोण जिसे आप अधिक खूबसूरत पाते हैं, किसी भी फ़ील्ड लेबल पर सीएसएस वर्ग जोड़ रहा है जिसे allowBlank=false से चिह्नित किया गया है और सीएसएस में अपना अनिवार्य सूचक शैली है।

Ext.define('Ext.ux.form', {

    extend: 'Ext.form.Panel',

    listeners: {
        'beforeadd': function(){
            if (!field.allowBlank) {
                field.labelClsExtra = 'x-required';
            }
        }
    }

});

इसके बाद आप अपने फ़ील्ड लेबल को सीएसएस में शैली के साथ :after एक छद्म उपयोगिता के :after :

.x-required:after {
    content: ' *';
    color: red;
    font-weight: bold;
}