Question

我的网格标题处于垂直位置（电话标题），当我尝试将标题的宽度调整为 50px 时，我不会＃ 39;再看看标题文本（但如果我手动将标题向左拖动，我可以看到标题文本），所以我的问题是：我怎样才能始终显示标题文本将标题大小设置为较小的大小后。

请看一下这行代码：

{ text: 'Phone' dataIndex: 'phone', cls: 'grid-header-phone' }

现在我只需添加一个较小的宽度：

{ text: 'Phone', width: 50, dataIndex: 'phone', cls: 'grid-header-phone' }

以下是一个工作示例：FIDDLE

这里是我使用的代码：

Ext.application({
name : 'Fiddle',

launch : function() {
    var store = Ext.create('Ext.data.Store', {
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"homer@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        }
    });

    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: store,
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', width: 50, dataIndex: 'phone', cls: 'grid-header-phone' }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
  }
});

这里是css代码：

.grid-header-phone .x-column-header-text {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);

/* transform doesn't work on inline elements */
display: inline-block;

/* need to hard code a height for this to work */
/* you could use Ext.util.TextMetrics if you needed to dynamically determine the text size */
height: 40px;
}

.x-ie8 .grid-header-phone .x-column-header-text {
/* IE8 doesn't have css transform */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

Answer 1

使用 display：inline-flex 而不是内联块。

如何在extjs中调整列网格标题？

1 个答案: