Question

我在网格列上使用autoSize：true。它工作正常，但对于某些列，它提供了额外的空间。我看到无论哪里看到额外的空间我都看到宽度为40px。只是想知道要设置的默认宽度？您可以在下面的屏幕截图中看到问题列。

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

Answer 1

您可以看到the source code

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

最小列宽为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;
},

Answer 2

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

if(objPridr2["MST_DATE"] != System.DBNull.Value )
{
    txtdate.Value = Convert.ToDateTime(objPridr2["MST_DATE"]).ToString("dd/MM/yyyy").Trim();
}

这将覆盖私有 getMaxContentWidth 函数，并添加一个名为 minColumnWidth 的新配置设置，默认为40以保持兼容性。

在使用 autoSize 之前，您可以为网格视图设置 minColumnWidth 。例如，要防止名为 g 的网格中的任何列低于宽度10：

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

});

自动调整列，提供额外的空间

2 个答案: