extjs网格列标题自动换行不起作用

Question

在我的 extjs6 网格中，我的列标题不适合空间。如何仅在列标题中进行自动换行？这是我尝试过的方法，但不起作用。

                            xtype: 'grid',
                        title: 'Daily Performance',
                        itemId: 'performanceAccountDailyGridID',
                        bind: {
                            store: '{myDailyPerformanceAccountStore}'
                        },                            
                        margin: '10px 0px 10px 0px',
                        ui: 'featuredpanel-framed',
                        cls: 'custom-gridPerformance',
                        height: 400,
                        width: 800,
                        columns: [
                            {
                                header: 'Filedate',
                                dataIndex: 'filedate',
                                flex: 1
                            },

css

.custom-gridPerformance .x-column-header-inner .x-column-header-text {
white-space: normal;
}

Answer 1

您的 CSS 选择器应该嵌套到包含列标题文本的 .x-column-header-text 为止。只需提供 white-space: normal 就足够了。 所以你的 CSS 应该是：

   .custom-gridPerformance .x-column-header-inner .x-column-header-text {
    white-space: normal;
}

工作示例：

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'region'],
    data: [{
        name: 'xyz',
        email: 'xyz@xyz.com',
        region: 'Arizona'
    }, {
        name: 'xyz',
        email: 'xyz@xyz.com',
        region: 'Alaska'
    }, {
        name: 'xyz',
        email: 'xyz@xyz.com',
        region: 'Alaska'
    }, {
        name: 'xyz',
        email: 'xyz@xyz.com',
        region: 'Alabama'
    }]
});

Ext.create('Ext.grid.Panel', {
    store: store,
    width: 400,
      cls: 'custom-gridPerformance',
    renderTo: Ext.getBody(),
   
    columns: [{
        text: 'Name of zoro of life style',
        dataIndex: 'name',

    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1,

    }, {
        text: 'State',
        dataIndex: 'region',
        
    }],
    

});

.custom-gridPerformance .x-column-header-inner .x-column-header-text {
    white-space: normal;
}

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css"><!-- framework javascript --><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>