Question

我有一个网格面板和5列。问题是列标题和行数据未对齐。我相信它只是我的项目中的问题，因为当我使用相同的代码创建一个示例时，一切正常。检查以下图片：

任何人都可以提出可能存在的问题吗？

Answer 1

请根据要求在css下方申请。

1）对于自定义特定的ExtJS GridPanel，请在css：

下面应用

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

注意：此处，“＃testgrid_id”是特定网格面板的ID。

2）要应用于所有ExtJS GridPanel，请在css：

下面应用

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

谢谢！

Answer 2

实际上我发现大多数时候，网格都在某个面板下。因此实际问题在于这个类

  .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溢出列并拧紧整个网格对齐。

可能是因为我将GridPanel嵌套到另一个面板或我的情况下的一个行扩展器中，或者在一些模态对话下，或者它可能导致设置不发生的任何内容。

快速修复。

    **white-space:normal;**

将诀窍并将内容挤入列中。但是它不应用省略号，所以如果内容很长，它有点烦人，它没有隐藏“......”

我会尝试找到另一种可以解决这个问题的解决方案，但是猜猜是什么时候将它部署到服务器上了！

我希望这有助于某人

Answer 3

我在使用GXT 2.2.5（Chrome版本26.0.1410.43m）时遇到此错误。

解决方案：

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

注意，如果您的CSS包含以下内容：

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

远程它。

Answer 4

我有完全相同的问题。

对我来说问题是，我是在我的列标题上设置HTML ID。然后，ExtJS会向ID添加有趣的内容，例如 titleEl ， textEl ， triggerEL 。

例如：

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

这必须以某种方式搞砸列监听器。

解决方案：改为使用类。

Answer 5

在我的情况下（GXT 2.2.1）我通过继承GridView，重写getColumnStyle，并将adj设置为0来解决问题：

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

extjs - 列标题和行数据未对齐

5 个答案: