Скрытие столбцов сетки изменяет высоту строк

У меня довольно неприятная проблема с динамическим сокрытием столбцов сетки. После того, как я скрою столбцы (с длинным текстом в ячейках), высота строк сетки резко увеличится. Прежде чем скрыть введите здесь описание изображения

и после операции скрытия

введите здесь описание изображения

Как видите, первый ряд явно слишком высокий. Вероятно, причиной такого поведения является тот факт, что я использую обтекание текстом в ячейках сетки.

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

Есть ли эффективный способ сделать строки сетки, чтобы не изменять их высоту после скрытия столбцов (и использования textwrap)?


word-wrap grid extjs4.1
person John    schedule 11.09.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я лично сталкивался с этим странным явлением раньше. Проблема вызвана тем, что Ext JS «скрывает» столбцы, устанавливая ширину на 0 пикселей.

Мое решение состояло в том, чтобы добавить прослушиватели событий в заголовок сетки следующим образом:

// me is the grid
me.headerCt.on({
    columnhide: me.removeWordWrapOnHide,
    columnshow: me.addWordWrapOnShow,
    scope:      me
});

Вместо того, чтобы использовать существующий класс x-grid-cell-inner, создайте новый, например:

<style type="text/css">
    td.grid-cell-wordwrap > div {
        white-space: normal; /* may need !important, not sure */
    }
</style>

Затем реализация этих двух функций сделала так:

removeWordWrapOnHide: function(headerCt, column){
    var me = this,
        wordWrapRe = /wordwrap/;
    if(column.useWordWrap || wordWrapRe.test(column.tdCls)){
        column.tdCls = column.tdCls.replace("grid-cell-wordwrap", "");
        column.useWordWrap = true;  // Flag to check on show
        me.view.refresh();
    }
},

addWordWrapOnShow: function(headerCt, column){
    var me = this,
        wordWrapRe = /wordwrap/;
    if(column.useWordWrap && !wordWrapRe.test(column.tdCls)){
        column.tdCls = "grid-cell-wordwrap " + column.tdCls;
        me.view.refresh();
    }
}

Возможно, это не самый эффективный способ, но он выполняет свою работу.

person Eric    schedule 12.09.2012
comment
Для тех, кто найдет этот ответ, это, по-видимому, исправлено в 4.2.0 как EXTJSIV-6734. Для этого нет ветки на форуме, потому что об этом сообщалось внутри компании, но она есть в примечаниях к выпуску. - person Eric; 26.03.2013