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




(3)

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

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

Answers

एक दृष्टिकोण जिसे आप अधिक खूबसूरत पाते हैं, किसी भी फ़ील्ड लेबल पर सीएसएस वर्ग जोड़ रहा है जिसे 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;
}

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

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

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

आप ढांचे के साथ क्या करने की कोशिश कर रहे हैं यह निर्धारित करने जा रहा है कि किस का उपयोग करना है।

ExtJS

एक पृष्ठ आरआईए एप्लिकेशन के लिए बहुत अच्छा है जहां पेज पर एक बार एक्स्टजेएस फ्रेमवर्क लोड किया गया है, जिसमें 0 हाथ कोडित एचटीएमएल है। इसका मतलब है कि ढांचा आपके आवेदन में सबकुछ प्रबंधित करता है।

JQuery

केस का उपयोग बहुत अलग है: आपका सर्वर साइड फ्रेमवर्क एचटीएमएल (जेएसपी, जीएसपी, एएसपी, जो भी हो) उत्पन्न करता है और आप प्रत्येक पृष्ठ पर JQuery लाइब्रेरी सहित उन पृष्ठों पर कार्यक्षमता जोड़ते हैं।

ExtJS विपक्ष:

  1. जटिल ढांचे - दिल की बेहोशी के लिए नहीं :)
  2. तेजी से सीखने की अवस्था
  3. वहाँ बग हैं - हाँ वहाँ हैं। हालांकि, अधिकांश मुद्दे ढांचे का सही ढंग से उपयोग न करने और दस्तावेज़ीकरण को पर्याप्त रूप से पर्याप्त समझने से उत्पन्न नहीं होते हैं।
  4. ढांचा ढांचा - इसे दोनों + और - के रूप में देखा जा सकता है - लेकिन इस साल ~ 7 रिलीज़ हुए हैं।

ExtJS पेशेवर:

  1. वर्तमान में उपलब्ध घटकों और विगेट्स के सबसे पूर्ण सेट के साथ वास्तव में बहुमुखी ग्राहक पक्ष एमवीसी ढांचा।
  2. एक्सटेंसिबल। सचमुच Ext.extend () पहली चीज है जो आप करते हैं।
  3. सुंदर। बॉक्स थीम में से बहुत अच्छी तरह डिज़ाइन किया गया है कि अधिकांश देवताओं को कोई थीमिंग कौशल नहीं है (हम किसी भी उंगलियों को इंगित नहीं कर रहे हैं) वास्तव में पेशेवर और अच्छे दिखने वाले वेब ऐप्स बना सकते हैं।
  4. दस्तावेज़ीकरण अब तक मैंने किसी भी लाइब्रेरी, एपीआई, या ओपन सोर्स प्रोजेक्ट के बारे में देखा है। लाइव कोड नमूने के साथ एपीआई दस्तावेज़ों के साथ पूरा करें (भले ही कुछ छेद हैं) आप ट्विक कर सकते हैं और देख सकते हैं कि क्या होता है + स्रोत कोड। अधिकांश लाइब्रेरी में फैले महान उदाहरण। एमवीसी से थॉमिंग के सबसे महत्वपूर्ण विषयों पर उत्कृष्ट मार्गदर्शिकाएं। यहां तक ​​कि एक वीडियो लाइब्रेरी भी। यह दस्तावेज हाल ही में बहुत अद्यतन किया गया है, इसलिए यदि आपने पिछले 6 महीनों में नहीं देखा है - ठीक है, देखो!
  5. कई प्रमुख विशेषज्ञ सक्रिय रूप से दैनिक आधार पर भाग लेने के साथ मंच बहुत ज़िंदा हैं।
  6. उपयोगकर्ता एक्सटेंशन (यूएक्स) - एक बड़ा उपयोगकर्ता समुदाय रचनात्मक समाधान की एक अद्भुत सरणी की ओर जाता है।
  7. यह विशाल है! इसमें इतने सारे महान घटक हैं कि मुझे वास्तव में मान्यता से परे कुछ विस्तार करने की ज़रूरत नहीं है। क्या मैंने सीखने की अवस्था का जिक्र किया?
  8. एमवीसी - किसी भी आत्म सम्मानित आरआईए ऐप एमवीसी ढांचे के लिए एक जरूरी है
  9. निर्मित उपकरण
  10. एसएएसएस और कम्पास के साथ जोरदार समर्थन
  11. ... और भी बहुत कुछ है।

अस्वीकरण: मैं एक पूर्व निराश एक्स्टजेस डेवलपर हूं जो वास्तव में सीखने के लिए सीखने की वक्र पर काफी अधिक है :)

  • (एक समुदाय विकी के रूप में खुला)