Extjs 自动调整列的大小，提供一些额外的空间

我正在网格列上使用autoSize:true。它工作得很好，但对于某些列，它提供了额外的空间。我看到，在我看到额外空间的地方，我看到的宽度是40px。想知道要设置什么默认宽度吗？您可以在下面的屏幕截图中看到问题列

         refresh : function (dataview) {
             Ext.each(dataview.panel.columns, function (column) {
                 if (column.autoSizeColumn === true)
                     column.autoSize();
             })
         }

你可以看到

最小列宽恒定为40px

 /**
 * Returns the max contentWidth of the header's text and all cells
 * in the grid under this header.
 * @private
 */
getMaxContentWidth: function(header) {
    var me = this,
        cells = me.el.query(header.getCellInnerSelector()),
        originalWidth = header.getWidth(),
        i = 0,
        ln = cells.length,
        columnSizer = me.body.select(me.getColumnSizerSelector(header)),
        max = Math.max,
        widthAdjust = 0,
        maxWidth;

    if (ln > 0) {
        if (Ext.supports.ScrollWidthInlinePaddingBug) {
            widthAdjust += me.getCellPaddingAfter(cells[0]);
        }
        if (me.columnLines) {
            widthAdjust += Ext.fly(cells[0].parentNode).getBorderWidth('lr');
        }
    }

    // Set column width to 1px so we can detect the content width by measuring scrollWidth 
    columnSizer.setWidth(1);

    // We are about to measure the offsetWidth of the textEl to determine how much 
    // space the text occupies, but it will not report the correct width if the titleEl 
    // has text-overflow:ellipsis.  Set text-overflow to 'clip' before proceeding to 
    // ensure we get the correct measurement. 
    header.textEl.setStyle({
        "text-overflow": 'clip',
        display: 'table-cell'
    });

    // Allow for padding round text of header 
    maxWidth = header.textEl.dom.offsetWidth + header.titleEl.getPadding('lr');

    // revert to using text-overflow defined by the stylesheet 
    header.textEl.setStyle({
        "text-overflow": '',
        display: ''
    });

    for (; i < ln; i++) {
        maxWidth = max(maxWidth, cells[i].scrollWidth);
    }

    // in some browsers, the "after" padding is not accounted for in the scrollWidth 
    maxWidth += widthAdjust;

    // 40 is the minimum column width.  TODO: should this be configurable? 
    // One extra pixel needed. EXACT width shrinkwrap of text causes ellipsis to appear. 
    maxWidth = max(maxWidth + 1, 40);

    // Set column width back to original width 
    columnSizer.setWidth(originalWidth);

    return maxWidth;
},

/**
*返回标题文本和所有单元格的最大内容宽度
*在该标题下的网格中。
*@私人
*/
getMaxContentWidth:函数（标题）{
var me=这个，
cells=me.el.query（header.getCellInnerSelector（）），
originalWidth=header.getWidth（），
i=0，
ln=单元格长度，
columnSizer=me.body.select（me.getColumnSizerSelector（header）），
max=Math.max，
宽度调整=0，
最大宽度；
如果（ln>0）{
if（Ext.supports.ScrollWidthInlinePaddingBug）{
widthAdjust+=me.getCellPaddingAfter（单元格[0]）；
}
如果（我的专栏）{
widthAdjust+=Ext.fly（单元格[0].parentNode）.getBorderWidth（'lr'）；
}
}
//将列宽设置为1px，这样我们就可以通过测量滚动宽度来检测内容宽度
列大小器。设置宽度（1）；
//我们将测量textEl的offsetWidth以确定多少
//文本占用的空间，但如果标题为
//有文本溢出：省略号。请在继续之前将文本溢出设置为“剪辑”
//确保我们得到正确的测量值。
header.textEl.setStyle({
“文本溢出”：“剪辑”，
显示：“表格单元格”
});
//允许在页眉的文本中填充圆形
maxWidth=header.textEl.dom.offsetWidth+header.titleEl.getPadding（'lr'）；
//恢复到使用样式表定义的文本溢出
header.textEl.setStyle({
“文本溢出”：“”，
显示：“”
});
对于（；i

您可以看到

最小列宽恒定为40px

 /**
 * Returns the max contentWidth of the header's text and all cells
 * in the grid under this header.
 * @private
 */
getMaxContentWidth: function(header) {
    var me = this,
        cells = me.el.query(header.getCellInnerSelector()),
        originalWidth = header.getWidth(),
        i = 0,
        ln = cells.length,
        columnSizer = me.body.select(me.getColumnSizerSelector(header)),
        max = Math.max,
        widthAdjust = 0,
        maxWidth;

    if (ln > 0) {
        if (Ext.supports.ScrollWidthInlinePaddingBug) {
            widthAdjust += me.getCellPaddingAfter(cells[0]);
        }
        if (me.columnLines) {
            widthAdjust += Ext.fly(cells[0].parentNode).getBorderWidth('lr');
        }
    }

    // Set column width to 1px so we can detect the content width by measuring scrollWidth 
    columnSizer.setWidth(1);

    // We are about to measure the offsetWidth of the textEl to determine how much 
    // space the text occupies, but it will not report the correct width if the titleEl 
    // has text-overflow:ellipsis.  Set text-overflow to 'clip' before proceeding to 
    // ensure we get the correct measurement. 
    header.textEl.setStyle({
        "text-overflow": 'clip',
        display: 'table-cell'
    });

    // Allow for padding round text of header 
    maxWidth = header.textEl.dom.offsetWidth + header.titleEl.getPadding('lr');

    // revert to using text-overflow defined by the stylesheet 
    header.textEl.setStyle({
        "text-overflow": '',
        display: ''
    });

    for (; i < ln; i++) {
        maxWidth = max(maxWidth, cells[i].scrollWidth);
    }

    // in some browsers, the "after" padding is not accounted for in the scrollWidth 
    maxWidth += widthAdjust;

    // 40 is the minimum column width.  TODO: should this be configurable? 
    // One extra pixel needed. EXACT width shrinkwrap of text causes ellipsis to appear. 
    maxWidth = max(maxWidth + 1, 40);

    // Set column width back to original width 
    columnSizer.setWidth(originalWidth);

    return maxWidth;
},

/**
*返回标题文本和所有单元格的最大内容宽度
*在该标题下的网格中。
*@私人
*/
getMaxContentWidth:函数（标题）{
var me=这个，
cells=me.el.query（header.getCellInnerSelector（）），
originalWidth=header.getWidth（），
i=0，
ln=单元格长度，
columnSizer=me.body.select（me.getColumnSizerSelector（header）），
max=Math.max，
宽度调整=0，
最大宽度；
如果（ln>0）{
if（Ext.supports.ScrollWidthInlinePaddingBug）{
widthAdjust+=me.getCellPaddingAfter（单元格[0]）；
}
如果（我的专栏）{
widthAdjust+=Ext.fly（单元格[0].parentNode）.getBorderWidth（'lr'）；
}
}
//将列宽设置为1px，这样我们就可以通过测量滚动宽度来检测内容宽度
列大小器。设置宽度（1）；
//我们将测量textEl的offsetWidth以确定多少
//文本占用的空间，但如果标题为
//有文本溢出：省略号。请在继续之前将文本溢出设置为“剪辑”
//确保我们得到正确的测量值。
header.textEl.setStyle({
“文本溢出”：“剪辑”，
显示：“表格单元格”
});
//允许在页眉的文本中填充圆形
maxWidth=header.textEl.dom.offsetWidth+header.titleEl.getPadding（'lr'）；
//恢复到使用样式表定义的文本溢出
header.textEl.setStyle({
“文本溢出”：“”，
显示：“”
});
对于（；i

在创建网格之前，可以使用以下代码覆盖默认设置：

Ext.override(Ext.view.Table, {
    minColumnWidth : 40,
    getMaxContentWidth: function(header) {
        var me = this,
            cells = me.el.query(header.getCellInnerSelector()),
            originalWidth = header.getWidth(),
            i = 0,
            ln = cells.length,
            columnSizer = me.body.select(me.getColumnSizerSelector(header)),
            max = Math.max,
            widthAdjust = 0,
            maxWidth;

        if (ln > 0) {
            if (Ext.supports.ScrollWidthInlinePaddingBug) {
                widthAdjust += me.getCellPaddingAfter(cells[0]);
            }
            if (me.columnLines) {
                widthAdjust += Ext.fly(cells[0].parentNode).getBorderWidth('lr');
            }
        }

        // Set column width to 1px so we can detect the content width by measuring scrollWidth 
        columnSizer.setWidth(1);

        // We are about to measure the offsetWidth of the textEl to determine how much 
        // space the text occupies, but it will not report the correct width if the titleEl 
        // has text-overflow:ellipsis.  Set text-overflow to 'clip' before proceeding to 
        // ensure we get the correct measurement. 
        header.textEl.setStyle({
            "text-overflow": 'clip',
            display: 'table-cell'
        });

        // Allow for padding round text of header 
        maxWidth = header.textEl.dom.offsetWidth + header.titleEl.getPadding('lr');

        // revert to using text-overflow defined by the stylesheet 
        header.textEl.setStyle({
            "text-overflow": '',
            display: ''
        });

        for (; i < ln; i++) {
            maxWidth = max(maxWidth, cells[i].scrollWidth);
        }

        // in some browsers, the "after" padding is not accounted for in the scrollWidth 
        maxWidth += widthAdjust;

        // 40 is the minimum column width.  TODO: should this be configurable? 
        // One extra pixel needed. EXACT width shrinkwrap of text causes ellipsis to appear. 
        maxWidth = max(maxWidth + 1, me.minColumnWidth);

        // Set column width back to original width 
        columnSizer.setWidth(originalWidth);

        return maxWidth;
    }

});

---

在创建网格之前，可以使用以下代码替代默认设置：

Ext.override(Ext.view.Table, {
    minColumnWidth : 40,
    getMaxContentWidth: function(header) {
        var me = this,
            cells = me.el.query(header.getCellInnerSelector()),
            originalWidth = header.getWidth(),
            i = 0,
            ln = cells.length,
            columnSizer = me.body.select(me.getColumnSizerSelector(header)),
            max = Math.max,
            widthAdjust = 0,
            maxWidth;

        if (ln > 0) {
            if (Ext.supports.ScrollWidthInlinePaddingBug) {
                widthAdjust += me.getCellPaddingAfter(cells[0]);
            }
            if (me.columnLines) {
                widthAdjust += Ext.fly(cells[0].parentNode).getBorderWidth('lr');
            }
        }

        // Set column width to 1px so we can detect the content width by measuring scrollWidth 
        columnSizer.setWidth(1);

        // We are about to measure the offsetWidth of the textEl to determine how much 
        // space the text occupies, but it will not report the correct width if the titleEl 
        // has text-overflow:ellipsis.  Set text-overflow to 'clip' before proceeding to 
        // ensure we get the correct measurement. 
        header.textEl.setStyle({
            "text-overflow": 'clip',
            display: 'table-cell'
        });

        // Allow for padding round text of header 
        maxWidth = header.textEl.dom.offsetWidth + header.titleEl.getPadding('lr');

        // revert to using text-overflow defined by the stylesheet 
        header.textEl.setStyle({
            "text-overflow": '',
            display: ''
        });

        for (; i < ln; i++) {
            maxWidth = max(maxWidth, cells[i].scrollWidth);
        }

        // in some browsers, the "after" padding is not accounted for in the scrollWidth 
        maxWidth += widthAdjust;

        // 40 is the minimum column width.  TODO: should this be configurable? 
        // One extra pixel needed. EXACT width shrinkwrap of text causes ellipsis to appear. 
        maxWidth = max(maxWidth + 1, me.minColumnWidth);

        // Set column width back to original width 
        columnSizer.setWidth(originalWidth);

        return maxWidth;
    }

});

---

有没有办法覆盖这个全局配置？@Hacker你可以用ext.override来覆盖。但是，您会因为extjs版本迁移而头疼。找到另一种方法。有没有方法覆盖这个全局配置？@Hacker你可以用ext.override来做。但是，您会因为extjs版本迁移而头疼。另找一条路。