CODEWITHSUNDEEP
cssextjsgrid
solarissf
solarissf

Reputation: 1277

extjs grid column header word wrap not working

In my extjs6 grid I have column headers that don't fit in the space. How do I do a word wrap in the column header only? This is what I have tried and is not working.

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

Upvotes: 0

Views: 3594

Answers (1)

Ankit Chaudhary
Ankit Chaudhary

Reputation: 4089

You CSS selector should be nested till .x-column-header-text which contains the column header text.Just giving white-space: normal is sufficient. So your CSS should be:

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

Working Example: 

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'region'],
    data: [{
        name: 'xyz',
        email: '[email protected]',
        region: 'Arizona'
    }, {
        name: 'xyz',
        email: '[email protected]',
        region: 'Alaska'
    }, {
        name: 'xyz',
        email: '[email protected]',
        region: 'Alaska'
    }, {
        name: 'xyz',
        email: '[email protected]',
        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>

Upvotes: 3

Related Questions