extjs - कॉलम हेडर और पंक्ति डेटा संरेखित नहीं हैं

Question

मेरे पास एक ग्रिडपेनल और 5 कॉलम हैं। समस्या यह है कि कॉलम हेडर और पंक्ति डेटा गठबंधन नहीं होते हैं। मेरा मानना ​​है कि यह सिर्फ मेरी परियोजना में समस्या है जब मैं एक ही कोड के साथ एक उदाहरण बना देता हूं तो सब कुछ ठीक काम करता है।

किसी को भी बता सकते हैं कि क्या समस्या हो सकती है: निम्न छवि की जाँच करें?

Answer 1

कृपया आवश्यकताओं के अनुसार नीचे सीएसएस लागू करें।

1) विशिष्ट ExtJS GridPanel अनुकूलित करने के लिए, सीएसएस नीचे लागू होते हैं:

#testgrid_id table caption,table th,table td {  
padding : 0px !important; 
margin : 0px !important; 
} 

नोट: यहाँ, ऊपर "#testgrid_id" विशिष्ट ग्रिड पैनल की आईडी है।

2) सभी ExtJS GridPanels के लिए आवेदन करने के लिए, सीएसएस नीचे लागू होते हैं:

table caption,table th,table td {  
padding : 0px !important; 
margin : 0px !important; 
} 

धन्यवाद!

Answer 2

मेरे पास GXT 2.2.5 (क्रोम संस्करण 26.0.1410.43 मीटर) का उपयोग करके यह बग है।

समाधान:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .x-grid3-row td.x-grid3-cell 
    { 
     box-sizing: border-box; 
    } 
} 

ध्यान दें, अपने सीएसएस की तरह कुछ है या नहीं: दूरस्थ यह

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

।

Answer 3

वास्तव में मुझे पता चला कि ज्यादातर बार, ग्रिड कुछ पैनल के नीचे है। इसलिए वास्तविक समस्या इस वर्ग

.x-grid-cell-inner 
    { 
     overflow: hidden; 
     padding: 2px 6px 3px; 
     **text-overflow: ellipsis; 
     white-space:nowrap;** 

    } 

साथ है इसका कारण यह है या

<td class=" x-grid-cell x-grid-cell-gridcolumn-1099 "><div class="x-grid-cell-inner "></div></td> 

की चौड़ाई सेट नहीं मिलता है। Div को कॉलम बहती है और पूरे ग्रिड संरेखण को खराब कर देती है।

शायद क्योंकि मैंने ग्रिडपैनेल को किसी अन्य पैनल में घुमाया था या मेरे मामले में एक पंक्ति विस्तारक या कुछ मोडल वार्तालाप के तहत या जो कुछ भी हो सकता है, वह सेटिंग नहीं हो सकती है।

एक त्वरित फिक्स।

**white-space:normal;** 

चाल करेगा और कॉलम में सामग्री निचोड़ जाएगा। हालांकि यह इलिप्स को लागू नहीं करता है, इसलिए यदि सामग्री लंबी है, तो यह थोड़ा परेशान है, यह "..."

मैं एक और समाधान खोजने की कोशिश करूंगा जो चाल करता है, लेकिन अनुमान लगाएं, समय क्या है इसे सर्वर पर तैनात करें!

मुझे आशा है कि यह किसी

Answer 4

मैं बिल्कुल वैसा ही समस्या थी मदद करता है।

मेरे लिए समस्या यह थी कि मैं अपने कॉलम हेडर पर HTML आईडी सेट कर रहा था।ExtJS फिर आईडी पर मजाकिया चीजें जोड़ता है, जैसे शीर्षक एएल, टेक्स्ट एएल, ट्रिगर।

उदाहरण के लिए:

<div id="myPackageGridId1-titleEl" class="x-column-header-inner"> 

यह किसी भी तरह ऊपर स्तंभ श्रोता पेंच चाहिए।

समाधान: कक्षा का उपयोग करें।

Answer 5

मेरे मामले (GXT 2.2.1) मैं GridView उपवर्गीकरण, getColumnStyle अधिभावी, और 0 के लिए adj की स्थापना करके समस्या का समाधान होने में:

import com.extjs.gxt.ui.client.GXT; 
import com.extjs.gxt.ui.client.Style; 
import com.extjs.gxt.ui.client.widget.grid.GridView; 

public class GridViewBugFix extends GridView { 

    private boolean fixHeaderDisplacement = true; 

    public GridViewBugFix() { 
     super(); 
    } 

    @Override 
    protected String getColumnStyle(int colIndex, boolean isHeader) { 
     String style = !isHeader ? cm.getColumnStyle(colIndex) : ""; 
     if (style == null) { 
      style = ""; 
     } 

     int adj = GXT.isWebKit ? 2 : 0; 
     if (fixHeaderDisplacement) adj = 0; 

     style += "width:" + (getColumnWidth(colIndex) + adj) + "px;"; 
     if (cm.isHidden(colIndex)) { 
      style += "display:none;"; 
     } 
     Style.HorizontalAlignment align = cm.getColumnAlignment(colIndex); 
     if (align != null) { 
      style += "text-align:" + align.name() + ";"; 
     } 
     return style; 
    } 
}