ExtJS Grid Column: развернуть столбец, чтобы показать все содержимое - PullRequest
Новая
       32

ExtJS Grid Column: развернуть столбец, чтобы показать все содержимое

1 голос
/ 02 февраля 2012

Я создал сетку, имеющую столбцы с фиксированной шириной.Из-за фиксированной ширины некоторые столбцы недостаточно расширены для отображения полного содержимого, по крайней мере, для некоторых ячеек.

Теперь я ищу способ расширить этот столбец, если дважды щелкнуть его заголовок.

Я заметил, что в ColumnModel есть функция setColumnWidth (), но чтобы продолжить это, я должен получить максимальную длину содержимого.заранее спасибо!

Ответы [ 2 ]

2 голосов
/ 03 февраля 2012

Не уверен насчет расширения столбца до длины содержимого, и это может быть хорошо.Необычно большое количество контента может привести к тому, что сетка будет выглядеть ужасно.Однако вы можете добавить flex к любому столбцу, который хотите расширить. 

columns: [{
    header: 'Blah',
    width: 100,
    dataIndex: 'Blah'
},{
    header: 'Foo',
    flex: 1,
    dataIndex: 'Foo'
}]

В этом бите столбец Foo расширится, чтобы занять оставшееся пространство, оставшееся после того, как Blah был выделен, это 100px.

0 голосов
/ 07 сентября 2015

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

Я решил это путем переопределения обработчиков событий щелчка Ext.grid.column.Column. Для двойного щелчка по краю заголовка столбца обрабатывается частное событие onElDblClick.
Переопределите эту функцию, чтобы также обрабатывать двойной щелчок по всему заголовку столбца. Далее следует переопределить обработчик события onElClick, чтобы он знал, что может быть действие двойного щелчка, ожидающее с помощью вызова SetTimeout, в противном случае любые события, связанные с событием одиночного щелчка, такими как сортировка и выпадающее меню, будут вызываться всегда.

См. Код ниже, чтобы переопределить его. Я тестировал его только на ExtJS 4.1.1a, но его легко перенести на другие версии ExtJS. 


    // enable doubleclick on the column to expand it to the max width as well
    Ext.override(Ext.grid.column.Column, {
        /**
         * @private
         * Double click
         * @param e
         * @param t
         */
        onElDblClick: function(e, t) {
            var me = this,
                ownerCt = me.ownerCt;
            if (ownerCt && Ext.Array.indexOf(ownerCt.items, me) !== 0) {
                if (me.isOnLeftEdge(e) ) {
                    ownerCt.expandToFit(me.previousSibling('gridcolumn'));
                } else {
                    ownerCt.expandToFit(me);
                }
            }
        },
        onElClick: function(e, t) {
            // The grid's docked HeaderContainer.
            var me = this,
                ownerHeaderCt = me.getOwnerHeaderCt();

            if (me.el.getAttribute("data-dblclick") == null) {
                me.el.dom.setAttribute("data-dblclick", 1);
                setTimeout(function () {
                    if (me.el.getAttribute("data-dblclick") == 1) {
                        handleElClick(me, e, t);
                    }
                    me.el.dom.removeAttribute("data-dblclick");
                }, 300);
            } else {
                me.el.dom.removeAttribute("data-dblclick");
                me.onElDblClick(e, t);
            }

            function handleElClick(me, e, t) {
                var ownerHeaderCt = me.getOwnerHeaderCt();
                if (ownerHeaderCt && !ownerHeaderCt.ddLock) {
                    // Firefox doesn't check the current target in a within check.
                    // Therefore we check the target directly and then within (ancestors)
                    if (me.triggerEl && (e.target === me.triggerEl.dom || t === me.triggerEl.dom || e.within(me.triggerEl))) {
                        ownerHeaderCt.onHeaderTriggerClick(me, e, t);
                    // if its not on the left hand edge, sort
                    } else if (e.getKey() || (!me.isOnLeftEdge(e) && !me.isOnRightEdge(e))) {
                        me.toggleSortState();
                        ownerHeaderCt.onHeaderClick(me, e, t);
                    }
                }
            }
        }
    });

Проверка двойного щелчка - адаптированная версия, которую я нашел здесь https://stackoverflow.com/a/16033129/3436982.

...