extjs एक्सटी जेएस में वर्ड-रैप ग्रिड सेल




grid word-wrap (5)

(यह एक प्रश्न नहीं है, मैं एक एसईएस जेएस 3.1.0 का उपयोग करके पाया गया एक समाधान दस्तावेज कर रहा हूं। लेकिन, अगर आप बेहतर समाधान के बारे में जानते हैं तो जवाब देने में संकोच न करें!)

एक एक्सटी जेएस ग्रिड ऑब्जेक्ट के लिए कॉलम कॉन्फ़िगरेशन में वर्ड-लिपटे टेक्स्ट को अनुमति देने का मूल तरीका नहीं है, लेकिन ग्रिड द्वारा बनाए गए TD तत्वों के इनलाइन सीएसएस को ओवरराइड करने के लिए एक css प्रॉपर्टी है।

दुर्भाग्यवश, TD तत्वों में सामग्री को लपेटने वाला एक DIV तत्व होता है, और यह कि DIV white-space:nowrap सेट होता white-space:nowrap जेएस की स्टाइलशीट द्वारा white-space:nowrap , इसलिए TD सीएसएस को ओवरराइड करना अच्छा नहीं है।

मैंने अपनी मुख्य सीएसएस फ़ाइल में निम्नलिखित जोड़ा, एक साधारण फिक्स जो किसी भी ग्रिड कार्यक्षमता को तोड़ने के लिए प्रतीत होता है, लेकिन DIV से गुज़रने के लिए टीडी पर लागू होने वाली किसी भी white-space सेटिंग की अनुमति देता है।

.x-grid3-cell {
    /* TD is defaulted to word-wrap. Turn it off so
       it can be turned on for specific columns. */
    white-space:nowrap;
    }

.x-grid3-cell-inner {
    /* Inherit DIV's white-space from TD parent, since
       DIV's inline style is not accessible in the column
       definition. */
    white-space:inherit;
    }

वाईएमएमवी, लेकिन यह मेरे लिए काम करता है, इसे समाधान के रूप में बाहर निकालना चाहता था क्योंकि मुझे इंटरवेब्स खोजकर एक समाधान समाधान नहीं मिला।


यदि आप केवल एक कॉलम पर रैपिंग लागू करना चाहते हैं, तो आप कस्टम रेंडरर जोड़ सकते हैं।

जोड़ने के लिए यहां कार्य है:

function columnWrap(val){
    return '<div style="white-space:normal !important;">'+ val +'</div>';
}

फिर renderer: columnWrap जोड़ें renderer: columnWrap प्रत्येक कॉलम पर कॉलम लपेटें जिसे आप लपेटना चाहते हैं

new Ext.grid.GridPanel({
[...],
columns:[{   
     id: 'someID',
     header: "someHeader",
     dataIndex: 'someID',
     hidden: false,
     sortable: true,
     renderer: columnWrap           
}]

उपयोग

cellWrap: true

यदि आप अभी भी सीएसएस का उपयोग करना चाहते हैं तो थीम के भीतर यूई, चर, इत्यादि के साथ काम करने का प्रयास करें, या स्टाइल प्रॉपर्टी के साथ स्टाइल सेट करें।


करने के लिए सबसे अच्छा तरीका सेलवाप को नीचे के रूप में सही पर सेट करना है।

सेलव्रैप: सच

यह EXTJS 5.0 में अच्छी तरह से काम कर रहा है।


यदि आप केवल कुछ कॉलम में टेक्स्ट लपेटना चाहते हैं और ExtJS 4 का उपयोग कर रहे हैं, तो आप कॉलम में सेल्स के लिए एक सीएसएस क्लास निर्दिष्ट कर सकते हैं:

{
    text: 'My Column',
    dataIndex: 'data',
    tdCls: 'wrap'
}

और आपकी सीएसएस फ़ाइल में:

.wrap .x-grid-cell-inner {
    white-space: normal;
}

अन्य समाधान यह है कि:

columns : [
    {
        header: 'Header',
        dataIndex : 'text',
        renderer: function(value, metaData, record, rowIndex, colIndex, view) {
            metaData.style = "white-space: normal;";
            return value;
        }
    }
]