Ext JS：保存网格行的 DOM 操作

Question

Ext JS 的ActionColumn 有点困难，但这确实是一个单独的问题。我现在要做的是保存我对 Ext JS 所做的任何 DOM 操作，这样当我刷新我的网格时，更改就会保留下来。

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.当你加载这个小提琴时，你会看到第二行的铅笔图标将被隐藏，但 1 秒后，它会重新出现。它重新出现是因为我刷新了网格的视图，但它确实应该被保存为隐藏。我该如何做到这一点？我在做什么错/不理解？

另外，需要注意的是，使用 getClass or isDisabled 函数是行不通的，因为我的视图已经呈现。我只是使用刷新作为我的更改未保存的示例。

Answer 1

图标重新出现是正常行为，因为刷新功能将根据其初始配置重绘视图，而不会被您的 dom 操作修改。我的建议是在您的商店中添加一个 bool 字段，这将保持您的按钮的可见性状态。然后，您只需修改记录的值，按钮的可见性就会保持不变。