ExtJS: कॉलम के साथ ListView में टेक्स्ट कैसे लपेटें?

Question

मेरे पास ExtJSसूची दृश्य नियंत्रण 4 कॉलम के साथ है। कॉलम में से एक में टेक्स्ट होता है जो कॉलम की चौड़ाई बढ़ाता है, इस प्रकार कुछ पाठ अगले कॉलम के नीचे स्थित होते हैं।

मैं कैसे सूचीदृश्य में कोशिकाओं के लिए normal करने के लिए white-space सेट कर सकते हैं?

Answer 1

यह आपके स्तंभ परिभाषा में होना चाहिए:

{ 
    header: 'Besked', 
    dataIndex: 'besked', 
    tpl: '<p style=\"white-space:normal\";>{besked}</p>' 
} 

Answer 2

Sdavids solution काम करता है और मुझे लगता है कि के लिए मतदान किया।

लेकिन अभी मामले में आप शैलियों के बजाय एक सीएसएस वर्ग का उपयोग कर यह कैसे है पसंद करते हैं:

.listViewColumnWrap { white-space:normal; } 

Answer 3

यह:

{ 
    header: 'Besked', 
    dataIndex: 'besked', 
    cls: 'listViewColumnWrap' 
} 

तो फिर तुम कुछ सीएसएस फ़ाइल में इस लाइन की जरूरत है आपकी सभी सूची दृश्य, ग्रिड और कम्बोबॉक्स मेनू चुनने के लिए डिफ़ॉल्ट सीएसएस कक्षाओं को ओवरराइड करने के लिए एक क्रॉस-ब्राउज़र तरीका है, सभी अपनी टेक्स्ट सामग्री को लपेटते हैं:

.x-list-body dt {white-space: normal;} 
.x-list-body dt em { white-space: pre-wrap !important; word-wrap: break-word !important;} 
.x-grid3-row-flag { white-space: normal; background-color: #ffc; } 
.x-grid3-cell-inner, .x-grid3-hd-inner{ white-space: normal; } 
.x-grid3-cell-inner { white-space: pre-wrap !important; word-wrap: break-word !important;} 
.x-combo-list-inner .x-combo-list-item { white-space: normal; } 
.x-combo-list-item { white-space: pre-wrap !important; word-wrap: break-word !important;}