如何在 extjs 中调整列网格 header 的大小？

Question

我有这个网格，在垂直位置有 headers (phone header)，当我尝试调整大小时header 的宽度为 50px 我再也看不到 header 文本 （但如果我手动将 header 拖到左边我可以看到 header 文本），所以我的问题是：即使将 header 大小设置为更小的尺寸。

请看一下这行代码：

{ 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 中调整列网格 header 的大小？

How to resize column grid header in extjs?

css

extjs

sass

extjs5