Ext.ux.GridRowDeleter

[mfoley]

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]

Thanks

[jsakalos]

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]

One more note: Have you seen this: Grid RowAction Plugin?

[mfoley]

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!