extjs - заголовки столбцов и данные строк не выровнены - PullRequest
Новая
       4

extjs - заголовки столбцов и данные строк не выровнены

7 голосов
/ 15 марта 2011

У меня есть сетка и 5 столбцов. Проблема в том, что заголовки столбцов и данные строк не выровнены. Я считаю, что проблема в моем проекте только в том, что когда я создаю пример с тем же кодом, все работает нормально. Проверьте следующее изображение:

image

Кто-нибудь может подсказать, в чем может быть проблема?

Ответы [ 5 ]

5 голосов
/ 06 декабря 2012

Пожалуйста, примените ниже css согласно требованиям.

1) Для настройки конкретной ExtJS GridPanel, примените ниже css: 

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

Примечание: Здесь, выше "#testgrid_id" этоid конкретной Grid Panel.

2) Для применения ко всем GridPanels ExtJS примените ниже css: 

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

Спасибо!

2 голосов
/ 30 октября 2013

На самом деле я обнаружил, что в большинстве случаев сетка находится под какой-то панелью. Следовательно, настоящая проблема с этим классом 

  .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;**

Сделаем трюк и втиснем содержимое в столбец. Однако он не применяет эллипсы, поэтому он немного раздражает, если содержимое длинное, оно не скрыто с помощью «...»

Я попытаюсь найти другое решение, которое справится с задачей, но угадайте, что, время развернуть это на сервере!

Надеюсь, это кому-нибудь поможет

0 голосов
/ 27 июля 2017

В моем случае (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;
    }
}
0 голосов
/ 03 июля 2014

У меня была точно такая же проблема.

Для меня проблема заключалась в том, что я устанавливал идентификаторы HTML для заголовков моих столбцов.ExtJS добавляет к идентификатору забавные вещи, такие как titleEl , textEl , triggerEL .

Например: 

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

Это должно как-то испортить слушатель столбца.

Решение: используйте вместо него class .

0 голосов
/ 11 апреля 2013

У меня есть эта ошибка с использованием 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;
}

дистанционно.

...