The final solution is to use overflow-wrap.
 P.S. Can’t apply to hidden column, will cause all row height become enormously large.
| 1
2
3
4
 | var myGrid = Ext.create('Ext.grid.Panel', {
  columns: {
    items: [
      {text: '程式日誌', dataIndex: 'LOGGING', width: 750, tdCls: 'column_no_wrap'},
 | 
| 1
2
3
4
 | .column_no_wrap .x-grid-cell-inner {
    white-space: normal;
    overflow-wrap: break-word;
}
 | 
Not work:
- Maintain white-spaces in Data when using extjs
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 | Ext.util.CSS.createStyleSheet(
    '.custom-whitespace .x-grid-cell-inner { white-space:pre }'
);
Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    title: 'StackOverflow: Maintain white-spaces in Data when using extjs',
    columns: [{
        header: 'col',
        flex: 1,
        dataIndex: 'field1',
        tdCls: 'custom-whitespace'
    }],
    store: [
        ['one two three'],
        ['four five    six'],
        ['seven eight nine']
    ]
});
 | 
- Hover Tooltip
Extjs 4 grid mouseover show full cell value
| 1
2
3
4
 | function renderTip(value, metaData, record, rowIdx, colIdx, store) {
    metaData.tdAttr = 'data-qtip="' + value + '"';
    return value;
};
 | 
Extjs4 set tooltip on each column hover in gridPanel
 Not work neighter.
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 | Ext.getCmp('DynamicDemandGrid').getView().on('render', function(view) {
    view.tip = Ext.create('Ext.tip.ToolTip', {
        // The overall target element.
        target: view.el,
        // Each grid row causes its own seperate show and hide.
        delegate: view.cellSelector,
        // Moving within the row should not hide the tip.
        trackMouse: true,
        // Render immediately so that tip.body can be referenced prior to the first show.
        renderTo: Ext.getBody(),
        listeners: {
            // Change content dynamically depending on which element triggered the show.
            beforeshow: function updateTipBody(tip) {
                var gridColums = view.getGridColumns();
                var column = gridColums[tip.triggerElement.cellIndex];
                var val=view.getRecord(tip.triggerElement.parentNode).get(column.dataIndex);
                tip.update(val);
            }
        }
    });
});
 | 
Kind of Working?
- Using css: