PDA

View Full Version : How to add a Button to the grid cell



Mike_javaJunior
19 Jun 2013, 4:10 AM
I have a grid in which I need to remove a line. For this I'd like to use button, which I want to insert to the last cell. Or just how to handle the cellClick or something like this?

MikeRH
19 Jun 2013, 10:09 AM
There are many ways to do this. One way I typically use is an actioncolumn (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Action).

For example:



columns: [
{
xtype : 'actioncolumn',
header : 'Delete',
width : 50,
align : 'center',
items : [
{
icon:'some_icon.png',
tooltip : 'Delete',
handler : function (grid, rowIndex, colIndex, item, e, record) {
//do your delete record function here
},
scope : me
}
]
}
]


Or if you want to pick up the delete event in your controller you can use something like.



columns: [
{
xtype : 'actioncolumn',
header : 'Delete',
width : 50,
align : 'center',
items : [
{
icon:'some_icon.png',
tooltip : 'Delete',
handler : function (grid, rowIndex, colIndex, item, e, record) {
this.fireEvent('deleteRecord', this, record);
},
scope : me
}
]
}
]


And in your controller you would have something like:



init: function(){
this.control({
'your_grid_alias':{
deleteRecord:function(e,rec){
// Do your delete function here
}
}
});
}

Mike_javaJunior
19 Jun 2013, 11:11 AM
That's fine, but I use java

Colin Alworth
19 Jun 2013, 1:23 PM
In GXT 2, you simple declare a GridCellRenderer for that column, and return the button (or any other widget) that you want to have drawn. Be aware that there are performance implications of drawing widgets, since that will be a new widget in each cell in that column.

You can return either html or css from GridCellRenderer. It is possible to emit html instead of the Button widget, and listen for Event.CellClick from the grid and handle the click that way. This will be more efficient, but may take more effort to set up.

Mike_javaJunior
19 Jun 2013, 10:03 PM
I implemented listener for the cellclick firstly but how to set an image for the cell? Or in case I'll finally decide to use buttons, how to find in which row the button was pressed to delete the right row? looK:

column.setRenderer(new GridCellRenderer() {
@Override
public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore store, Grid grid) {
final int col = colIndex;
final int row = rowIndex;
Button b = new Button("remove", new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
//remove(col, row, customerId);<<-HERE
}
});

b.setIconStyle("/gxt/images/gxt/icons/delete.png");
return b;
}
});

which value I must post instead of row?

Mike_javaJunior
19 Jun 2013, 11:41 PM
I've found. to do this I had to do this:

column.setRenderer(new GridCellRenderer() {
@Override
public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore store, Grid grid) {


final int row = store.indexOf((PropertyItem) model);


Button b = new Button("remove", new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
Window.alert("row index= " + row);
remove(row, customerId);
}
});


b.setIconStyle("/gxt/images/gxt/icons/delete.png");
return b;
}
});