Ext JS：保存网格行的DOM操作 [英] Ext JS: Saving DOM manipulation of a grid row

问题描述

我有一点困难，Ext JS的 ActionColumn ，但这真的是一个单独的问题。我现在要做的就是省去我使用Ext JS的任何DOM操作，这样当我刷新网格时，更改将保留。

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

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?

另外，请注意，使用 getClass或isDisabled 函数不会，因为我的视图已经呈现。我只是使用刷新作为我的更改不保存的一个例子。

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.

推荐答案

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

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.

这篇关于Ext JS：保存网格行的DOM操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！