Hi guys. I’m developing the UI for a web application.
I’m using SmartGWT 2.1 version. I have a problem with ListGrid.
I’d want like to put 3 buttons into each record of ListGrid, such as field.
I’ve tried writing an override of createRecordComponent method to create the buttons and put them into the last field of ListGrid.
This is the code for the class of which I speak:
package org.ewr.client;
import java.util.Date;
import com.google.gwt.core.client.GWT;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.data.SortSpecifier;
import com.smartgwt.client.data.fields.DataSourceImageField;
import com.smartgwt.client.data.fields.DataSourceTextField;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.Autofit;
import com.smartgwt.client.types.ListGridFieldType;
import com.smartgwt.client.types.SortDirection;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.ImgButton;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.grid.CellFormatter;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.grid.events.CellClickEvent;
import com.smartgwt.client.widgets.grid.events.CellClickHandler;
import com.smartgwt.client.widgets.layout.HLayout;
public class RaceGrid extends ListGrid {
public RaceData dati;
public final RaceDetailPanel raceDetail = new RaceDetailPanel();
// my constants
private static interface FieldName {
String ID = "raceId";
String BUTTON = "button";
String DISTANCE = "distance";
String MEMBERS = "members";
String DATE = "date";
String TYPE = "type";
String FRIENDS = "friends";
}
// my classes
/**
* Initializes this control
*/
public void initialize () {
// initialize
setShowAllRecords (true);
setCanEdit (false);
setAutoFitData (Autofit.BOTH);
setCanSort (true);
setCanGroupBy (true);
setShowRecordComponents (true); // required to render button
setShowRecordComponentsByCell (true); // required to render button
setSort (new SortSpecifier[] { new SortSpecifier (FieldName.DATE, SortDirection.ASCENDING)});
// add fields with reasonable widths
final ListGridField typeField = new ListGridField(FieldName.TYPE, "Type", 50);
final ListGridField buttonField = new ListGridField (FieldName.BUTTON, "Button", 40);
final ListGridField raceIdField = new ListGridField(FieldName.ID,"raceId");
final ListGridField membersField = new ListGridField(FieldName.MEMBERS,"members");
final ListGridField dateField = new ListGridField(FieldName.DATE,"date");
final ListGridField distanceField = new ListGridField(FieldName.DISTANCE,"distance");
final ListGridField friendsField = new ListGridField(FieldName.FRIENDS,"friends");
setFields (raceIdField,typeField,membersField,dateField,distanceField,friendsField, buttonField);
//RACEID
raceIdField.setHidden(true);
//DATE
final DateTimeFormat dateFormatter = DateTimeFormat.getFormat("dd/mm/yy hh:MM:ss");
dateField.setCellFormatter(new CellFormatter() {
@Override
public String format(Object value, ListGridRecord record, int rowNum,int colNum) {
if (value != null) {
try {
Date dateValue = (Date) value;
return dateFormatter.format(dateValue);
} catch (Exception e) {
return value.toString();
}
} else {
return "";
}
}
});
//DISTANCE
distanceField.setCellFormatter(new CellFormatter() {
@Override
public String format(Object value, ListGridRecord record, int rowNum,
int colNum) {
// TODO Auto-generated method stub
return value.toString()+" km";
}
});
//TYPE
typeField.setType(ListGridFieldType.IMAGE);
typeField.setAlign(Alignment.CENTER );
//typeField.setDefaultValue("other");
typeField.setImageSize(50);
typeField.setImageURLSuffix(".png");
//Click Handler for each row. When a row is clicked
//the title of Section Stack under the tab pane
//is setted with the data inside the row which is being clicked
addCellClickHandler(new CellClickHandler(){
@Override
public void onCellClick(CellClickEvent event) {
//TO DO TAKE THE DATA FROM GRID AND PUT THEM INSTEAD OF THE TITLE OF SECTION STACK
}
});
}
/**
* The ListGrid interface: overridden to render the connection buttons
* @param record
* @param colNum
* @return Canvas
*/
@Override
protected Canvas createRecordComponent (final ListGridRecord record,final Integer colNum) {
// fieldName-specific processing
final String fieldName = getFieldName (colNum);
final HLayout panel = new HLayout();
if (fieldName.equals (FieldName.BUTTON)) {
// add a button
final Button subscribe = new Button ("Iscriviti");
final ImgButton fbLikeButton = new ImgButton();
final ImgButton fbShareButton = new ImgButton();
//Button Like
fbLikeButton.setAlign(Alignment.LEFT);
fbLikeButton.setSrc("images/fb_like.png");
fbLikeButton.setHeight(18);
fbLikeButton.setWidth(18);
//Button Share
fbShareButton.setAlign(Alignment.RIGHT);
fbShareButton.setSrc("images/fb_share.png");
fbShareButton.setHeight(18);
fbShareButton.setWidth(18);
//Button Subscribe
subscribe.setHeight (18);
subscribe.setWidth (24);
//SUBSCRIBE BUTTON CLICK HANDLER
subscribe.addClickHandler (new ClickHandler () {
public void onClick (final ClickEvent event) {
// delegate
SC.say ("You are subscribed");
}
});
//FB_LIKE BUTTON CLICK HANDLER
fbLikeButton.addClickHandler (new ClickHandler () {
public void onClick (final ClickEvent event) {
// delegate
SC.say ("You like it!");
}
});
//FB_SHARE BUTTON CLICK HANDLER
fbShareButton.addClickHandler (new ClickHandler () {
public void onClick (final ClickEvent event) {
// delegate
SC.say ("You share this content!");
}
});
panel.addMember(subscribe);
panel.addMember(fbShareButton);
panel.addMember(fbLikeButton);
return panel;
}
// no control to set -- note that neither the documentation nor the samples indicate whether
// we should return null or super.createRecordComponent ()!
return null;
}
}
Hope your answer!