मैं extjs में अलग-अलग टेक्स्टफील्ड लेबल पर लेबल चौड़ाई कैसे सेट कर सकता हूं?

Question

निम्न कोड के साथ:

var win = new Ext.Window({ 
    xtype: 'form', 
    layout: 'form', 
    items: [{ 
     xtype: 'textfield', 
     value: 'test', 
     name: 'testing', 
     labelWidth: 200, 
     fieldLabel: 'This is a really, really long label here', 
     labelStyle: 'white-space: nowrap;' 
    }] 

}).show(); 

इस लेबल पाठ इनपुट अनुभाग overlaps (खेद पर्याप्त प्रतिष्ठा अंक एक छवि पोस्ट करने के लिए नहीं)।

मैंने सीएसएस का उपयोग विभिन्न संयोजनों के साथ किया है: 'cls', 'लेबल स्टाइल', 'शैली', और 'चौड़ाई' लेकिन वे सभी को अनदेखा किया जाता है (कम से कम लेबल चौड़ाई को ठीक से सेट करने के मामले में) ।
मैं गतिशील रूप से एक रूप में आइटम जोड़ रहा हूं, और मैं प्रत्येक तत्व के लिए कस्टम लेबल चौड़ाई चाहता हूं। अन्य तत्वों पर, मैं डिफ़ॉल्ट 100px स्पेस को लेबल के लिए आरक्षित नहीं करना चाहता - मुझे कम चाहिए। क्या यह मानक टेक्स्टफील्ड के साथ संभव है, या क्या मुझे ऐसा करने के लिए एक कस्टम घटक बनाना है?

प्रदान की गई किसी भी अंतर्दृष्टि के लिए धन्यवाद।

Answer 1

labelWidthFormPanel की एक कॉन्फ़िगरेशन है, Field की नहीं। इसे प्रत्येक लेआउट स्तर पर प्रदान किया जाता है और नियंत्रित किया जाता है, न कि प्रत्येक व्यक्तिगत क्षेत्र के स्तर पर। लेबल तत्व के पास फ़ील्ड कंटेनर के लेआउट के साथ कुछ भी नहीं है - यदि आप मार्कअप को देखते हैं, तो लेबल फ़्लोट किया जाता है और फ़ील्ड के युक्त div में बाएं-पैडिंग होती है जो "लेबल चौड़ाई" को नियंत्रित करने की कोशिश कर रही है । यह पैडिंग .x-form-element पर गतिशील शैली के रूप में कोड (लेआउट द्वारा) में जोड़ा जाता है जो इनपुट को लपेटता है। ओवरराइड करने के लिए आपको या तो लेआउट कोड (छोटे नहीं) को ओवरराइड करना होगा या शायद !important कक्षा का उपयोग करना होगा जो प्रति फ़ील्ड पैडिंग ओवरराइड करता है (आपके फ़ील्ड की आईडी या कस्टम cls का उपयोग करके आप लागू करते हैं)।

उस ने कहा, लेबल चौड़ाई वही, सौंदर्यशास्त्र बोलने वाला होना चाहिए। यकीन नहीं है कि आप उस सम्मेलन को तोड़ना क्यों चाहते हैं?

Answer 2

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

{ 
    xtype: 'form', 
    layout: 'form', 
    labelWidth: 100, 
    items: [ 
     // {some fields with labelWidth=100}, 
     { 
      xtype: 'panel', 
      layout: 'form', 
      labelWidth: 200, 
      items: [ 
       xtype: 'textfield', 
       value: 'test', 
       name: 'testing', 
       fieldLabel: 'This is a really, really long label here', 
       labelStyle: 'white-space: nowrap;' 
      ] 
     } 
     // {some fields with labelWidth=100} 
    ] 
} 

Answer 3

क्या मैं बस एक रिक्त स्ट्रिंग पर labelWidth की स्थापना की और अपना काम करने में ब्राउज़र जाने है था। ;-)

{ 
    id: 'date0' 
    ,fieldLabel: 'Start' 
    ,labelWidth: '' 
    ,xtype: 'datefield' 
    ,emptyText: 'Select a start date' 
    ,value: Ext.Date.add(new Date(), Ext.Date.DAY, -_duration) 
    // ,width: 100 
} 

Answer 4

अंततः, आप मैदान के afterRender हैक करने का विकल्प होता है: एक ही काम करने के लिए कई सीएसएस वर्गों के बाद

afterRender: function() { 
    <PARENT>.prototype.afterRender.call(this); 
    this.adjustCustomLabelWidth(300); 
}, 
adjustCustomLabelWidth: function(w) { 
    this.el.parent('.x-form-item').child('.x-form-item-label'). 
      setStyle('width', w); 
    this.el.parent('.x-form-element').setStyle('padding-left', w + 5); 
    this.ownerCt.on('afterlayout', function() { 
     this.el.setStyle('width', this.el.getWidth() - w + 100); 
    }, this, {single: true}) 
}, 

Answer 5

मैं यह कोशिश, मैं के बाद सभी सीएसएस को दूर किया यह एक आकर्षण की तरह काम करता है।

{ 
    xtype: 'whatever-with-a-field-label', 
    name: 'veryMeaningFullName', 
    fieldLabel: 'very long description to show above a tiny text field', 
    labelStyle: 'width:400px; white-space: nowrap;', 
    //could use width:100% if you want 
    maxWidth: 20 
} 

• शांति