GXT (Ext GWT) - How to search remotely in grid with StoreFilterField ?

First of all we have to enrich the GXT control StoreFilterField, like in the below code extract, to be able to perform the remotely search in the grid:

public abstract class RemoteStoreFilterField<M extends ModelData> extends StoreFilterField<M> {
    public static final String PARM_FIELDS = “fields“;
    public static final String PARM_QUERY = “query”;
   
   /* disable the locally default behavior */

   @Override
   public void bind (Store<M> store) {
       /* do nothing here – to avoid calling locally the grid filter */
   }
   @Override
    protected boolean doSelect (Store<M> store, M parent, M record, String property, String filter) {
        /* do nothing here – to avoid calling locally the grid filter */
        return true;
    }

    /* prepare the notifications for the remote searching */

    @Override
    protected void onTriggerClick (ComponentEvent ce) {
        String filter = getRawValue();
        setValue (null);
        if (filter != null && !filter.isEmpty()) {
            handleCancelFilter();
        }
    }
    @Override
    protected void onFilter () {
        focus();
        String filter = getRawValue();
        if (filter != null && !filter.isEmpty()) {
            handleOnFilter (filter);
        }
    }

    /* handlers for the remote searching */

    /** need to perform cancellation of the remote filter */
    protected abstract void handleCancelFilter();

    /** need to perform the remote filtering */
    protected abstract void handleOnFilter(String filter);
}
So, we have to use this base code when we build the grid, which must be populated by a “store loader”.
public class GridHolderPanel extends ContenPanel {
    private String gridSearchText_;
    private Grid grid_;
    
    private void createGrid () {
        /* create a RPC data proxy */ 
        final RpcProxy<Data> proxy = new RpcProxy<Data>() {
           /* in this function we add the searching parameters: PARM_QUERY and PARM_FIELDS */
           @Override
           public void load( Object loadCfg, AsyncCallback<Data> callback) {
               LoadConfig gridLoadCfg = (LoadConfig) loadCfg;
               ...
               if (gridSearchText_ != null && !gridSearchText.isEmpty()) {
                   gridLoadCfg.set(RemoteStoreFilterField.PARM_QUERY, gridSearchTExt_);
                   /* fileds string has the list of column names, separated by comma for example – 
                      it’s your format here – you decide how you do it */
                   String fileds = "";
                   for (ColumnConfig cc : grid_.getColumnModel().getColumns()) {
                       if (cc.isHidden()) continue;
                       if (fields.length() > 0) fields += “,”;
                       fields += cc.getDataIndex();
                   }
                   gridLoadCfg.set(RemoteStoreFilterField.PARM_FIELDS, fields);
               }
           }
        };
        /* create a grid loader */ 
        final BaseListLoader<M> gridLoader = ...
        /* create a grid */ 
        ...
        grid_ = new Grid<M>(store, columnsModel);
        /* creates the toolbar where to put the search field */
        ToolBar tb = new ToolBar();
        /* create the search field */
        RemoteStoreFilterField<M> searcher = new RemoteStoreFilterField () {
           /* handle filtering – this is a call after each key pressed – it might be improved to be 
              deferred executed *** keep watching this blog I have a neat solution for this, 
              called LastCallEventBurstManager */
           @Override
           protected void handleOnFilter (String filter) {
               gridSearchText_ = filter;
               gridLoader.load();
           }
           /* handles the filtering cancellation */
           @Override
           protected void handleCancelFilter () {
               gridSearchText_ = null;
               gridLoader.load();
            }
        };
        /* build the UI */ 
        tb.add (searcher);
        this.add (grid_);
        this.setBottomComponent(tb);
    }
}
So the main points here are: RemoteStoreFilterField, data proxy for the grid, grid loader, and the grid columns model. All mixed in the way I’ve described above.

No comments:

Post a Comment