PDA

View Full Version : Multi Row Delete Strike Through



vn_vinod
10 Dec 2011, 10:07 AM
My requirement is user can select multiple rows using the checkbox and on clicking 'Delete' button selected rows should have strike through style applied (See image)

29914

Thanks in advance

tobiu
10 Dec 2011, 10:24 AM
i recommend to listen to the event:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-event-selectionchange

and then add the striketrhrough CSS class or a style to the selected row(s). don't forget to also remove it from the ones you deselect.

vn_vinod
10 Dec 2011, 11:16 PM
Can you check this example http://www.learnsomethings.com/2011/09/25/the-new-extjs4-xtype-actioncolumn-in-a-nutshell/. Clicking on Lock/Unlock creates the strike through effect, but this is for individual row clicked. What changes has to be done to make it work for multiple rows.

**My Code**


itemId: 'DelButton',
text: 'Delete',
handler : function(){
var selection = grid.getView().getSelectionModel().getSelection();
if (selection.length > 0) {
if (confirm('Are you sure to delete?')){

for(var i = 0; i < selection.length ; i++){
var rowIndex = grid.getStore().indexOf(selection[i]);
var rec = grid.store.getAt(rowIndex);

grid.store.getAt(rowIndex).addClass('line-through'); //option one
grid.store.getAt(rowIndex).addCls('line-through'); //option two
grid.store.addRowClass(rowIndex, 'line-through'); //option three
grid.store.getRow(rowIndex).addClass('line-through'); //option four
}
}
}
}


None of the options from one to four worked. Shows not a function error.

twaindev
11 Dec 2011, 2:56 AM
Just add this style:


.x-grid-row-selected .x-grid-cell {
text-decoration: line-through;
}

skirtle
11 Dec 2011, 4:36 AM
If I've read the question correctly, it isn't selected rows that need the strike-through. Rows are selected and then a delete button is clicked to delete them.

This is a bit open-ended as you haven't explained what happens to deleted rows. Just styling them with a strike-through is one thing but do you want that effect to remain if the columns are sorted?

The approach I've taken is to add an extra field to the model to store the deletion state. If instead you just want a temporary effect then you may want to use the getNode method on the grid view to grab the TR elements and add the class.


.strike-through-row .x-grid-cell {
text-decoration: line-through;
}

/* No strike-through for the checkbox */
.strike-through-row .x-grid-cell-first {
text-decoration: none;
}


var store = Ext.create('Ext.data.ArrayStore', {
fields: ['name', 'shape', 'age', 'deleted'],
data: [
['Tom', 'Triangle', 1],
['Sam', 'Square', 2],
['Cat', 'Circle', 3]
]
});

Ext.create('Ext.grid.Panel', {
height: 300,
multiSelect: true,
renderTo: Ext.getBody(),
selType: 'checkboxmodel',
store: store,
width: 400,
columns: [
{dataIndex: 'name', header: 'Name', flex: 1},
{dataIndex: 'shape', header: 'Shape'},
{dataIndex: 'age', header: 'Age'}
],
tbar: [
{
text: 'Delete',
handler: function(btn) {
Ext.each(btn.up('grid').getSelectionModel().getSelection(), function(record) {
record.set('deleted', true);
});
}
}, {
text: 'Undelete',
handler: function(btn) {
Ext.each(btn.up('grid').getSelectionModel().getSelection(), function(record) {
record.set('deleted', false);
});
}
}
],
viewConfig: {
getRowClass: function(record) {
if (record.get('deleted')) {
return 'strike-through-row';
}
}
}
});

twaindev
11 Dec 2011, 5:05 AM
You're right skirtle and your answer is accurate, as always.

vn_vinod
12 Dec 2011, 5:42 AM
Thank you for your help.