'How to override x-grid-cell-inner CSS on the grid cells (Ext JS)?

I am trying to override the inner-cell white-space property in a grid. Setting cls: 'custom-grid' does not change the styling. Please help. My CSS file:

div.custom-grid div.x-grid-cell-inner {
  white-space: normal; /* changed from nowrap */
}

Definition:

    Ext.define('My.Panel', {
    extend: 'Ext.grid.Panel',
    cls:'custom-grid' //tried this didn't work
    loadMask: false,    
    scrollable: true,    
    frame: true,

    initComponent: function () {
        let me = this;
        let store = 'base.store.notes'; 
        me.store = store;
        me.columns = [
            {header:Text.Shoppers, width: 100, dataIndex: 'shoppers'},
            {header:Text.Id, width: 100,  dataIndex: 'val'},
        ];
       
        me.callParent(arguments);
    }
javascriptcssextjs


Solution 1:[1]

The first div is wrong. It should look like this:

.custom-grid div.x-grid-cell-inner {
  white-space: normal; /* changed from nowrap */
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dinkheller

Related Questions