PDA

View Full Version : Saving DOM manipulation of a grid row



incutonez
6 Mar 2014, 7:47 AM
I'm having a little difficulty with Ext JS's ActionColumn (http://stackoverflow.com/questions/22178998/ext-js-getting-a-specific-rows-action-column), 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. (https://fiddle.sencha.com/#fiddle/43j) 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 (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Action-cfg-items) functions will not do, as my views are already rendered. I'm just using the refresh as an example of my changes not saving.