Gwt sencha grid(requestfactory) not displaying data even when store has data

Question

I have a sencha grid and it has a requestfactory to pull the data. I can pull the data from the server but it does not show up.

I need to be able to make 2 selections from comboboxes and click a button to reload the grid. but it does not seem to work.

Here is the code -

@Override
public Widget asWidget() {
    final ExplorerRequestFactory rf = GWT
            .create(ExplorerRequestFactory.class);
    rf.initialize(new SimpleEventBus());

    RequestFactoryProxy<FilterPagingLoadConfig, PagingLoadResult<FlowerProxy>> proxy = new RequestFactoryProxy<FilterPagingLoadConfig, PagingLoadResult<FlowerProxy>>() {
        @Override
        public void load(
                final FilterPagingLoadConfig loadConfig,
                final Receiver<? super PagingLoadResult<FlowerProxy>> receiver) {
            FlowerRequest req = rf.flowerRequest();
            List<SortInfo> sortInfo = createRequestSortInfo(req,
                    loadConfig.getSortInfo());

            req.getFlowers(vId, fId, loadConfig.getOffset(),
                    loadConfig.getLimit(), sortInfo).to(receiver);
            req.fire();

        }
    };
    loader = new PagingLoader<FilterPagingLoadConfig, PagingLoadResult<FlowerProxy>>(
            proxy) {
        @Override
        protected FilterPagingLoadConfig newLoadConfig() {
            return new FilterPagingLoadConfigBean();
        }
    };
    loader.setRemoteSort(true);

    FlowerProxyProperties props = GWT.create(FlowerProxyProperties.class);

    ListStore<FlowerProxy> store = new ListStore<FlowerProxy>(props.id());
    loader.addLoadHandler(new LoadResultListStoreBinding<FilterPagingLoadConfig, FlowerProxy, PagingLoadResult<FlowerProxy>>(
            store) {
        @Override
        public void onLoad(
                final LoadEvent<FilterPagingLoadConfig, PagingLoadResult<FlowerProxy>> event) {
            LOG.info("Loader:addloadHondaler");
            super.onLoad(event);

            view.getView().refresh(false);
            view.getView().layout();
//********Data successfully retrieved but does not populate the grid *********///
//**************************///
            LOG.info("onLoad size:" + view.getStore().size()); //Data is present
        }
    });

    final PagingToolBar toolBar = new PagingToolBar(50);
    toolBar.getElement().getStyle().setProperty("borderBottom", "none");
    toolBar.bind(loader);

    ColumnConfig<FlowerProxy, String> nameColumn = new ColumnConfig<FlowerProxy, String>(
            props.name(), 150, "Name");
    ColumnConfig<FlowerProxy, Date> dateColumn = new ColumnConfig<FlowerProxy, Date>(
            props.LastAccessDate(), 150, "Date");
    dateColumn.setCell(new DateCell(DateTimeFormat
            .getFormat(PredefinedFormat.DATE_SHORT)));

    List<ColumnConfig<FlowerProxy, ?>> l = new ArrayList<ColumnConfig<FlowerProxy, ?>>();
    l.add(nameColumn);
    l.add(dateColumn);

    ColumnModel<FlowerProxy> cm = new ColumnModel<FlowerProxy>(l);

    view = new Grid<FlowerProxy>(store, cm);
    view.getView().setForceFit(true);
    view.setLoadMask(true);
    view.setLoader(loader);

    // Create the filters, and hook them to the loader and grid
    GridFilters<FlowerProxy> filters = new GridFilters<FlowerProxy>(loader);
    filters.initPlugin(view);

    filters.addFilter(new DateFilter<FlowerProxy>(props.LastAccessDate()));
    filters.addFilter(new StringFilter<FlowerProxy>(props.name()));


    VerticalLayoutContainer con = new VerticalLayoutContainer();
    con.setBorders(true);
    con.setPixelSize(400, 300);
    con.add(view, new VerticalLayoutData(1, 1));
    con.add(toolBar, new VerticalLayoutData(1, -1));

    return con.asWidget();
}
     //********Call to this function should trigger a data pull and populate the grid ******///
    /****************/
    // Requestfactory call goes through, gets the data too but does not update the grid
public void reload(final String v, final String flower) {
    LOG.info("V=> " + v + "\tFlower=> " + flower);
    this.vId = v;
    this.fId = flower;
    LOG.info("Store size:" + view.getStore().size());
    Scheduler.get().scheduleDeferred(new ScheduledCommand() {
        @Override
        public void execute() {
            if (v != null && flower != null && v.length() > 0
                    && flower.length() > 0) {
                loader.load();
                LOG.info("Loader called");
            } 
        }
    });

}

Any ideas what I am missing here?

Answer 1

Without being able to run the code (as you didn't post the proxy, the server entity, the service proxy (aka request), or the service implementation, its a little hard to say, but I do see at least one thing definitely wrong, and others that may be confusing.

First and foremost, return the same instance from asWidget() each time it is called. The chain of events I am guessing is occurring that is confounding you:

• App starts, something creates an instance of the widget where this asWidget method exists. In the course of setting it up, a store is created, as is a loader, and this.loader is assigned to that loader. The widget is added to the dom.
• At some point, asWidget() is called a second time. This leaves the old grid attached (from the first time it was called), and creates a new grid, a new store, a new loader (and assigns to this.loader), but may not do anything with that new grid
• Finally reload is called. This has a valid loader (the new one, not the old one), calls the server, populates the new store, which draws in the new grid. However, the old grid is still attached, so data never shows up.

---

With this fixed, you don't actually need to override any methods in LoadResultListStoreBinding - the base class will add items to the store, and the store will issue events that the grid is listening for.