Панель Ext JS Grid: как отображать контент при наведении курсора

Question

Я показываю панель Ext JS Grid с 2 столбцами. Я должен держать фиксированную ширину обоих столбцов. Моя проблема в том, что когда текст отображается в 1-м столбце и когда он превышает его ширину, у меня нет никакого способа увидеть весь текст (я могу растянуть его вручную, но из-за фиксированной ширины он иногда не отображается). Может быть кто-нибудь знает, как я могу это сделать-

Я имею в виду - я могу показать текст при наведении курсора, но я хочу, чтобы он отображал текст, если пользователь удерживает указатель мыши более 5 секунд, в противном случае это будет слишком раздражающим; если пользователь берет свою мышь от 1-го ряда до последнего.

Любая другая идея также будет полезна.

Answer 1

Добавьте следующий стиль в вашу таблицу стилей:

.wordwrap {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word;
    white-space: normal; /* Internet Explorer 5.5+ */
}

и затем включите его в конфигурацию cls вашей колонки:

columns: [{
    header: "Column 1",
    dataIndex: 'Col1',
    cls: 'wordwrap'
}]

Это должно обернуть содержимое вашей ячейки сетки.