Опция shrinkWrap из конфига класса Ext.view.Table

[khusamov]

Здравствуйте!

Опция shrinkWrap из конфига класса Ext.view.Table почему-то не влияет на отображение строк в таблице.

Я хотел выставить значение этой опции как 2, чтобы иметь возможность выводить ячейки переменной высоты (в зависимости от количества текста в этой ячейки)


Вроде по документации
http://docs.sencha.com/extjs/5.1/5.1...cfg-shrinkWrap

так и должно быть.

Но на деле ничего не меняется.

Как быть?

[nohuhu]

Опция shrinkWrap относится к статическому контенту компонентов, которые рендерятся в DOM уже готовыми; эта опция контролирует, каким образом будет работать layout компонента.

Table view устроен гораздо сложнее, и опцию shrinkWrap для табличного контента не использует. Вам нужна вот эта опция, которая задаётся индивидуально для колонок: http://docs.sencha.com/extjs/5.1/5.1...iableRowHeight

Обычно ячейки переменной высоты использовать не рекомендуется, т.к. Table view придётся измерять каждую строку после обновления, а потом делать layout. На маленьких наборах данных это работает более-менее, но масштабируется плоховато.

[khusamov]

Странно, попробовал variableRowHeight: true, даже у всех колонок выставил, не работает. Строки не разворачиваются...

[nohuhu]

А стили поправили? Если мне склероз не изменяет, на внутренних <div> ячеек висит что-то типа white-space: nowrap; text-overflow: ellipsis;

[khusamov]

Нет, стили не правил. А где написано об этом?

[nohuhu]

Подозреваю, что нигде не написано. Обычно опция variableRowHeight используется, когда нужно впихнуть в ячейки какую-то достаточно сложную разметку. В таких случаях CSS стили соответствуют HTML разметке, и ячейка растягивается содержимым. variableRowHeight заставит BufferedRenderer измерять высоту каждой строки, но изменять высоту строк эта опция не будет.

Если никакой дополнительной разметки нет, а есть просто много текста, то этот текст будет обычным образом помещён во внутренний div ячейки, который не даст этому тексту растянуть ячейку. Это сделано специально как раз для того, чтобы все строки были равной высоты по умолчанию, т.к. это наиболее производительный вариант.

Добавьте на этот grid стиль с высокой specificity, который будет отменять white-space: nowrap, и всё у вас заработает:

.nowrapping-view .x-grid-row .x-grid-cell .x-grid-cell-inner {
    white-space: normal;
    text-overflow: initial;
}

var grid = new Ext.grid.Panel({
    viewConfig: {
        cls: 'nowrapping-view'
    },
    ...
});

Ну и т.д., можно выборочно отменять стили только на нужных ячейках.

[khusamov]

Спасибо! Не знал что все так сложно.
А что такое specificity?

[nohuhu]

К сожалению, в grids вообще ничего простого нет. :( Этот компонент очень жёстко оптимизирован на производительность, т.к. клиенты требуют совершенно безумных вещей типа наборов данных с миллионами строк и сотнями колонок, и чтобы всё это работало в IE8. Ну, оно работает в результате, но платой за это является безумная сложность кода и CSS.

CSS specificity это механизм выборочности, который определяет, какое именно правило будет применяться к данному элементу. В моём примере используется 4 вложенных класса, этого должно быть достаточно, чтобы сказать браузеру: я знаю, что делаю, поэтому не спорь и примени вот эти правила вот к этим ячейкам, даже если есть ещё какие-то, противоречащие, правила. Более высокая выборочность селекторов позволяет писать нормальный CSS, не ляпая !important на все правила подряд.

Вот тут можно почитать: http://www.smashingmagazine.com/2007...u-should-know/

[khusamov]

У меня он и с сотнями строк тормозит... а тут миллионы...
Спасибо, буду изучать.

[nohuhu]

Есть разное "тормозит", и вызываться может разными причинами. Приведите более конкретный пример, что именно тормозит и как.

В общем случае тормозить не должен ни один компонент.