GXT 3 Date Field Min & Max Date

I want to set min dan max date for datefield and want it disable the selection of dates out of specified range.

DateField dateField = new DateField(new DateTimePropertyEditor(DateTimeFormat.getFormat("dd-MMM-yyyy")));
dateField.getDatePicker().setMinDate(mindate);
dateField.getDatePicker().setMaxDate(maxdDate);
        

GXT Grid Anchor Cell

In previous post, I wrote about my solution to render image & link in grid cell.
This is the generic class to handle it.

import java.util.HashSet;
import java.util.Set;

import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.cell.client.ValueUpdater;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.safehtml.shared.SafeHtmlUtils;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.sencha.gxt.core.client.ValueProvider;

public class AnchorLinkCell<T> extends AbstractCell<T> {

    String imgURL = "";
    String styleClass = "";
    AsyncCallback<T> callback;
    ValueProvider<T, String> vp;

    public AnchorLinkCell(String imgURL, ValueProvider<T, String> vp, String styleClass, AsyncCallback<T> callback) {
        this.imgURL = imgURL;
        this.callback = callback;
        this.styleClass = styleClass;
        this.vp = vp;
    }

    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context, T value, SafeHtmlBuilder sb) {
        sb.appendHtmlConstant("<div class=\"" + this.styleClass + "\" style='cursor: pointer'/>");
        if (imgURL != "") {
            sb.appendHtmlConstant("<img src='" + imgURL + "' style='cursor: pointer'/> ");
        }
        sb.append(SafeHtmlUtils.fromTrustedString(this.vp.getValue(value)));
        sb.appendHtmlConstant("</div>");
    }

    @Override
    public Set<String> getConsumedEvents() {
        Set<String> events = new HashSet<String>();
        events.add("click");
        return events;
    }

    @Override
    public void onBrowserEvent(com.google.gwt.cell.client.Cell.Context context, Element parent, T value, NativeEvent event, ValueUpdater<T> valueUpdater) {
        // TODO Auto-generated method stub
        super.onBrowserEvent(context, parent, value, event, valueUpdater);
        if (parent.getFirstChildElement().isOrHasChild(Element.as(event.getEventTarget()))) {
            this.callback.onSuccess(value);
        }
    }
}

Steps :

1. Declare column config with bean parameters and set the value as the identity of the bean.

ColumnConfig<PremiseBean, PremiseBean> prm_companyColumn = new ColumnConfig<PremiseBean, PremiseBean>(props.identity(), 150,"Company Name");
        

2. This can be done by adding an identity value provider in the property access interface.

IdentityValueProvider<PremiseBean> identity();

3. Declare the AnchorLinkCell and set the column cell.

AnchorLinkCell<PremiseBean> acLink=new AnchorLinkCell<PremiseBeanHelper.PremiseBean>("images/icons/add.png",props.prm_name(), "myLinkStyleNameinCSS", new AsyncCallback<PremiseBean>() {

    @Override
    public void onFailure(Throwable caught) {
        Application.handleException(caught);                
    }

    @Override
    public void onSuccess(PremiseBean result) {
        Info.display("AnchorLinkCall Test", result.getPk());                                
    }
});

prm_companyColumn.setCell(acLink);

4. Do the rest steps for the grid

GXT3 Grid Cell with clickable Image and hyperlink

Reference:

1. http://stackoverflow.com/questions/18951897/gwt-imagecell-change-image-dynamically-in-a-datagrid-or-celltable
2. http://stackoverflow.com/questions/4691801/how-can-i-render-a-clickabletextcell-as-an-anchor-in-a-gwt-celltable
3. http://www.gwtproject.org/doc/latest/DevGuideUiCustomCells.html#cell-onBrowserEvent

I want to make the cell table in a grid to show icon and link in a column.
I tried to use anchor but unsuccessful. The cell grid only render text & image but not the event.
I found a solution using ImageCell.
Steps :

1. Set columnconfig
2. Declare ImageCell object
3. override render subroutine
4. Override getConsumedEvents - to expose click event
5.Override onBrowserEvent to handle the event

In this example, it's only handle the first child element, so I just group the image & link in a div.

ColumnConfig<PremiseBean, String> prm_nameColumn = new ColumnConfig<PremiseBean, String>(props.prm_name(), 150, "Name");
        
ImageCell ic = new ImageCell() {

    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context, String value, SafeHtmlBuilder sb) {
        sb.appendHtmlConstant("<div class=\"myClickableCellTestStyle\" style='cursor: pointer'/>");
        sb.appendHtmlConstant("<img src='images/icons/add.png' style='cursor: pointer'/> ");
        sb.append(SafeHtmlUtils.fromTrustedString(value));
        sb.appendHtmlConstant("</div>");
    }

    @Override
    public Set<String> getConsumedEvents() {
        Set<String> events = new HashSet<String>();
        events.add("click");
        return events;
    }

    @Override
    public void onBrowserEvent(com.google.gwt.cell.client.Cell.Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> valueUpdater) {
        super.onBrowserEvent(context, parent, value, event, valueUpdater);
        if (parent.getFirstChildElement().isOrHasChild(Element.as(event.getEventTarget()))) {
            Console.writeLine("OnEvent");
            Info.display("Test", value);
        }
    }
};
prm_nameColumn.setCell(ic);

add style to css.

.myClickableCellTestStyle{
    text-decoration:underline;
}

GXT3 Whole Grid Filtering

This the code to perform the whole grid filtering

pagingGridControl.getStore().addFilter(new StoreFilter() {
  @Override
  public boolean select(Store store, Object parent, Object item) {
    if(txtKeyword.getValue()==null){
      return true;
    }else{
      if(txtKeyword.getValue().trim().equals("")){
        return true;
      }
      
      Cheap_Sale_AllowedBean obj=(Cheap_Sale_AllowedBean) item;
      String sKeyword=txtKeyword.getValue();
      AutoBean<Cheap_Sale_AllowedBean> bean = AutoBeanUtils.getAutoBean(obj);
      Map<String,Object> map= AutoBeanUtils.getAllProperties(bean);
      for (String s : map.keySet()) {
        //Console.writeLine(s + "=" + map.get(s));
        if(map.get(s) !=null){
          if(map.get(s).toString().toLowerCase().indexOf(sKeyword) > -1){
            Console.writeLine(s + "=" + map.get(s));    
            return true;
          }
        }
      }          
    }
    return false;
  }
});

pagingGridControl.getStore().setEnableFilters(true);

The store filters must be enabled.

Source : http://www.sencha.com/forum/showthread.php?270023-Grid-Search

Textfield blur event not triggered when click on button's icon.

I read the GXT forum and just realize that Textfield blur event is not triggered when a button with icon is clicked on the icon. I found a temporary solution to handle this situation. Before submit the data, the textField finishEditing() function must be called.

Here is the code from my project. I'm going to put it in my library after this.

int widgetCount=toolbar.getWidgetCount();
for(int i=0; i < widgetCount;i ++){
  Widget w=toolbar.getWidget(i);
  if(w.getClass().equals(TextField.class)){
    TextField t=(TextField) w;
    t.finishEditing();                       
  }
}

Source : http://www.sencha.com/forum/showthread.php?258421-Field-and-blur-event

GXT3 Input Maxlength

I just migrated from GXT2 to GXT3.
Most of my previous code does not work and I got a problem to fix MAXLENGTH input element.
Luckily, the solution is very simple. Here is the code

textbox.getCell().getInputElement(textbox.getElement()).setMaxLength(maxLength);

This code worked for TextField, TextArea, NumberField<Integer> and NumberField<Double>.

But for NumberField, this syntax must be applied after the value has been set. If not, the maxlength attaribute will be removed.

Source : http://www.sencha.com/forum/showthread.php?178262-Setting-max-length-on-TextField