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字段添加到您的商店，这将保持按钮的可见性状态。然后，您只需修改记录的值，就可以保留按钮的可见性。

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

1 个答案: