Change properties from cell grid and refresh?

Question

I have a grid that when is clicked change the property cellwrap from false to true

    onCellClick: function(view, td, index, record, tr, rindex) {

        var
            me = this,
            vm = me.getViewModel(),
            field = me.lookupReference('descriptionField');
            
            field.cellWrap = true;
            field.getView().getStore().getSource().reload();            

    }

But i guess im making it wrong. Can i reload the grid with the cellwrap propertie change? Im using the v7.5.1.20

Answer 1

cellWrap is a configuration of an Ext.grid.column.Column. You can't simply change it after the grid is rendered, you need to use the reconfigure method of Ext.grid.Panel to update the columns and set cellWrap to true.

You can try this code in a Sencha Fiddle (ExtJS 7.4.0 modern material), click anywhere and see how the top left cell is changing:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        const store = new Ext.data.Store({
            fields: ['name', 'phone'],
            data: [{
                name: 'Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1',
                phone: 111
            }, {
                name: 'Name2',
                phone: 222
            }, {
                name: 'Name3',
                phone: 333
            }, {
                name: 'Name4',
                phone: 444
            }, {
                name: 'Name5',
                phone: 555
            }]
        })

        const myGrid = Ext.create({
            renderTo: Ext.getBody(),
            xtype: 'grid',
            store: store,
            selModel: 'cellmodel',
            columns: [{
                text: 'Name',
                dataIndex: 'name',
                cellWrap: false
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }],
            listeners: {
                cellclick: function (table, td, cellIndex, record, tr, rowIndex, e, eOpts) {
                    myGrid.reconfigure(null, [{
                        text: 'Name',
                        dataIndex: 'name',
                        cellWrap: true
                    }, {
                        text: 'Phone',
                        dataIndex: 'phone'
                    }]);
                }
            }
        });
    }
});