DGrid：将列拟合到数据 [英] DGrid: Fit column to data

问题描述

我正在使用这样的DGrid：

I have am using a DGrid like this:

var dgrid = new OnDemandGrid({
    store: myStore,
    columns: [
        {field: "name"},
        {field: "age"}
    ],
    showHeader: false
},divName);
dgrid.startup();

它的大小本身就是这样的：

It is currently sizing itself like this:

我想第一列的大小适合最长的数据：

I would like the first column sized to fit the longest piece of data:

如果从商店中删除最长的名称，第一行应该按照以下原则调整自己的大小：

If the longest name were removed from the store the first row should resize itself like this:

我已经创建了一个带有DGrid的JSFiddle作为答案的模板。

编辑：我看到了 Sitepen文章关于调整DGrid的大小，但没有提到如何解决这个问题。

I have see the Sitepen article on sizing DGrid but it doesn't mention how to resolve this.

编辑2：有人在另一个论坛。

推荐答案

你可以使用在 CSS 中的最小宽度。当内容不足时，它将保持最小宽度，并扩展以适应内容，以防内容超出宽度。

You can make use of min-width in CSS. It will maintain the min-width when content is less than it and expand to fit the content in case content is more than the width.

您可以使用它：

div {
    vertical-align:top;
}

.Container {
    border:1px solid Black;
}

.name {
    display:inline-block;
    height:150px;
    text-align:center;
    min-width:100px;
}

.number {
    display:inline-block;
    height:150px;
    text-align:center;
    width:100px;
}

你可以在这里看到这里 - > http://jsfiddle.net/q9Vtx/2/

You can see this here->http://jsfiddle.net/q9Vtx/2/

看到最小-width属性允许内容适合。

See that the min-width property lets the content 'fit in'.

希望这有帮助!!!

这篇关于DGrid：将列拟合到数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！