Ext JS: Saving DOM manipulation of a grid row

Question

I'm having a little difficulty with Ext JS's ActionColumn, but that's really a separate issue. What I'm trying to do right now is save off whatever DOM manipulation I do with Ext JS, so that when I refresh my grid, the changes stay.

var grid = Ext.create('Ext.grid.Panel', {
    columns: [{
        xtype: 'actioncolumn',
        width: 50,
        items: [{
            icon: 'http://cdn.sencha.com/ext/gpl/4.2.1/examples/personel-review/images/edit.png',
            tooltip: 'Edit',
            iconCls: 'hideable',
            handler: function(grid, rowIndex, colIndex) {
                alert('you clicked the edit icon');
            }
        }]
    }, {
        text: 'Name', dataIndex: 'name'
    }],
    store: Ext.create('Ext.data.Store', {
        fields: ['name'],
        data: [{
            name: 'Me'
        }, {
            name: 'You'
        }, {
            name: 'Mulder'
        }]
    }),
    renderTo: Ext.getBody()
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var view = grid.getView();
        var rowHtml = view.getNode(1);
        console.log(view);
        var rowDom = Ext.get(rowHtml);
        var placeHolder = rowDom.down('.hideable');
        placeHolder.hide();
        setTimeout(function() {
            // This makes my DOM change go away... how to save the hide in the grid's HTML?
            grid.getView().refresh();
        }, 1000);
    }
});

Sencha Fiddle. When you load this fiddle, you'll see that the second row's pencil icon will be hidden, but 1 second later, it'll reappear. It reappears because I refresh the grid's view, but it should really be saved that it's hidden. How do I accomplish this? What am I doing wrong/not understanding?

Also, it's good to note that using the getClass or isDisabled functions will not do, as my views are already rendered. I'm just using the refresh as an example of my changes not saving.

Answer 1

It's a normal behavior that the icon reappear beacause the refresh function will redraw the view based on its initial configuration, wich is not modified by your dom manipulation. What I would suggest is to add a bool field to your store, wich will kept the visibility state of your button. You would then simply have to modify the record's value and the visibility of your button would be kept.