ExtJS Grid Column: expand column to show full content

Question

I created a grid having columns with fixed width. Due to the fixed width, some columns are not expanded enough to show full content, at least for some cells.

Now I am looking for a way to expand this column when double clicks at its header.

I noticed there is a function setColumnWidth() in ColumnModel, but to proceed this I have to get the maximum length of the content.

anybody has some advice? thanks in advance!

score 2 · Answer 1 · answered Feb 02 '12 at 20:07

2

Not sure about expanding the column to the length of the content, and that may be a good thing. An unusually long amount of content may end up making the grid look awful. However, you could add a flex to any column you want to expand.

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

In that bit, the Foo column will expand to take the remaining space left behind after Blah was allotted it's 100px.

answered Feb 02 '12 at 20:07

phatskat

1,797
1
15
32

hi. thanks for your reply. my case is little tricky. columns are dynamically generated from an external source. I don't know the usual length of a column, so I set same width for all columns. After data is loaded, some columns are not wide enough to show full content. I am thinking either using tooltip to show cell content or double clicking at header to expand only one column at a time, not expand all columns. – Simon Feb 02 '12 at 20:12
There are also some CSS tricks you can use to force a cell to wrap the text, so that if it is too long for the cell, it will break to the next line. – phatskat Feb 02 '12 at 20:36

score 0 · Answer 2 · edited May 23 '17 at 10:26

Knowing this is an old thread, but I would like to share it as I had the same issue.

I solved it through overriding the click event handlers of Ext.grid.column.Column. There is a private onElDblClick event handled for double clicking on the edge of the column header.
Override this function to also handle double click on the entire column header. Next is to override the onElClick event handler to let it know there could be a double click action pending via a SetTimeout call, otherwise any events attached to the single click event like sorting and the pull down menu will be called always.

See the below code to override it. I only tested it on ExtJS 4.1.1a, but would be easily ported to other ExtJS versions.


    // 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);
                    }
                }
            }
        }
    });

The double click check is an adapted version I found here https://stackoverflow.com/a/16033129/3436982.

ExtJS Grid Column: expand column to show full content

2 Answers2