PDA

View Full Version : Ext.ux.GridRowDeleter



mfoley
19 Mar 2008, 6:22 AM
Hey guys, here's a little something i threw together for a project I'm working on. It's just a grid plugin that you include in the column model that deletes the grid row when click.
JS:


Ext.ux.GridRowDeleter = function(config){
Ext.applyIf(config,{
renderer:function(value,meta){meta.css='x-grid3-row-deleter';return '<div ext:qtip="Delete Row"> </div>'},
id:Ext.id(null,'x-grid3-row-deleter'),
header:'<div class="x-grid3-row-deleter"> </div>',
width:25
});
Ext.apply(this,config);
this.getColumnIndex = function(){
return this.grid.getColumnModel().getIndexById(this.id);
},
this.onClick = function(grid,rowIndex,columnIndex){
if(columnIndex == this.getColumnIndex()){
grid.getStore().remove(grid.getStore().getAt(rowIndex));
}
};
this.init = function(grid){
this.grid = grid;
this.grid.on('cellclick',this.onClick,this);
}
}

CSS:


td.x-grid3-row-deleter{
background:url('/path_to_silk_icons/delete.png') no-repeat scroll 0% !important;
}

denkoo
19 Mar 2008, 10:58 AM
Thanks

jsakalos
19 Mar 2008, 3:13 PM
Nice idea would be to add a 'remote' mode where request to delete would be sent to server and only if successful the row would be deleted from grid's store.

jsakalos
19 Mar 2008, 3:14 PM
One more note: Have you seen this: Grid RowAction Plugin (http://extjs.com/forum/showthread.php?t=29961)?

mfoley
24 Mar 2008, 4:57 PM
No, I hadn't. Thanks for that. I threw together a "row duplicator" using the same idea. Using those action related column models really seems to save the need for a lot of context menu coding!