PagingModelMemoryProxy, Store.add, and sorting

[mabco]

I am using the new GXT 1.2.4 PagingModelMemoryProxy and am trying to add a row (model instance) to the associated store/grid. I call store.add(modelInstance), and see the new row in the grid, however, it's gone after I do a sort, either a manual sort on the grid column, or via a call to store.sort. The following code is the Local Paging example provided with GXT 1.2.4, modified to illustrate the issue. Click the "Add" button first. You will see the new row get added. Then sort, either via the column header, or via the "Sort" button, and you will see that the row is no longer in the grid. What am I doing wrong?

public class LocalPagingExample implements EntryPoint {

    private ListStore<Stock> store;  

    
    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
 
        LayoutContainer container = new LayoutContainer();

        container.setLayout(new FlowLayout(10));  

        PagingModelMemoryProxy proxy = new PagingModelMemoryProxy(TestData.getStocks());  

        PagingLoader loader = new BasePagingLoader(proxy);  
        loader.setRemoteSort(true);  
        loader.setSortDir(SortDir.ASC);
        loader.setSortField("change");

        store = new ListStore<Stock>(loader);  
//      store.setDefaultSort("change", SortDir.ASC);
        
        final PagingToolBar toolBar = new PagingToolBar(10);  
        toolBar.bind(loader);  

        loader.load(0, 10);  

        final NumberFormat currency = NumberFormat.getCurrencyFormat();  
        final NumberFormat number = NumberFormat.getFormat("0.00");  
        final NumberCellRenderer<Grid<Stock>> numberRenderer = new NumberCellRenderer<Grid<Stock>>(  
                currency);  

        GridCellRenderer<Stock> change = new GridCellRenderer<Stock>() {  
            public String render(Stock model, String property, ColumnData config, int rowIndex,  
                                 int colIndex, ListStore<Stock> store) {  
                double val = (Double) model.get(property);  
                String style = val < 0 ? "red" : "green";  
                return "<span style='color:" + style + "'>" + number.format(val) + "</span>";  
            }  
        };  

        GridCellRenderer<Stock> gridNumber = new GridCellRenderer<Stock>() {  
            public String render(Stock model, String property, ColumnData config, int rowIndex,  
                                 int colIndex, ListStore<Stock> store) {  
                return numberRenderer.render(null, property, model.get(property));  
            }  
        };  

        List<ColumnConfig> configs = new ArrayList<ColumnConfig>();  

        ColumnConfig column = new ColumnConfig();  
        column.setId("name");  
        column.setHeader("Company");  
        column.setWidth(200);  
        configs.add(column);  

        column = new ColumnConfig();  
        column.setId("symbol");  
        column.setHeader("Symbol");  
        column.setWidth(100);  
        configs.add(column);  

        column = new ColumnConfig();  
        column.setId("last");  
        column.setHeader("Last");  
        column.setAlignment(HorizontalAlignment.RIGHT);  
        column.setWidth(75);  
        column.setRenderer(gridNumber);  
        configs.add(column);  

        column = new ColumnConfig("change", "Change", 100);  
        column.setAlignment(HorizontalAlignment.RIGHT);  
        column.setRenderer(change);  
        configs.add(column);  

        column = new ColumnConfig("date", "Last Updated", 100);  
        column.setAlignment(HorizontalAlignment.RIGHT);  
        column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());  
        configs.add(column);  

        final ColumnModel cm = new ColumnModel(configs);  

        final ContentPanel cp = new ContentPanel();  
        cp.setFrame(true);  
        cp.setHeading("Local Paging Grid");  
        cp.setButtonAlign(HorizontalAlignment.CENTER);  
        cp.setLayout(new FitLayout());  
        cp.setBottomComponent(toolBar);  
        cp.setSize(600, 200);  

        final Grid<Stock> grid = new Grid<Stock>(store, cm);  
        grid.setBorders(true);  
        grid.setAutoExpandColumn("name");  

        grid.addListener( Events.SortChange, new Listener<GridEvent>() {
            public void handleEvent( GridEvent e ) {
                GWT.log(String.valueOf(grid.getStore().getCount()), null);
            }
        });

        cp.add(grid);  

        container.add(cp); 

        Button btn = new Button("Reload", new SelectionListener<ComponentEvent>() {  
            public void componentSelected(ComponentEvent ce) {
               
                PagingModelMemoryProxy proxy = new PagingModelMemoryProxy(TestData.getStocks());  

                PagingLoader loader = new BasePagingLoader(proxy);  
                loader.setRemoteSort(false);  
                loader.setSortDir(SortDir.ASC);
                loader.setSortField("change");

                store = new ListStore<Stock>(loader); 
                
                ((PagingToolBar)cp.getBottomComponent()).bind(loader);
       
                loader.load(0,10);
                
                grid.reconfigure(store, cm);
            }  
        });
        
        container.add(btn);
        
        Button clearBtn = new Button("Clear", new SelectionListener<ComponentEvent>() {  
            public void componentSelected(ComponentEvent ce) {
                grid.getStore().removeAll();
            }  
        });
        

        container.add(clearBtn);
        
        Button addBtn = new Button("Add", new SelectionListener<ComponentEvent>() {  
            public void componentSelected(ComponentEvent ce) {
                GWT.log("add",null);
                GWT.log(String.valueOf(grid.getStore().getCount()), null);

                Stock newStock = new Stock("XYZ Corp", "XYZ", 22.65d, 21.85d);
                grid.getStore().add(newStock);
                grid.getStore().commitChanges();
                GWT.log(String.valueOf(grid.getStore().getCount()), null);
                grid.getView().refresh(true);
            }  
        });
        

        container.add(addBtn);

        Button sortBtn = new Button("Sort", new SelectionListener<ComponentEvent>() {  
            public void componentSelected(ComponentEvent ce) {
                GWT.log("sort",null);
                grid.getStore().sort("change", SortDir.ASC);
            }  
        });
        

        container.add(sortBtn);

        RootPanel.get().add(container);

    }
}

[sven]

Yes sure it is removed. As it is not in the loader where the store serves the data from. So after the next load it is gone again.

[mabco]

I just noticed that sorting may not have anything to do with this problem, because the added row disappears if I use the paging controls on the grid too. It almost appears as if the new model instance isn't really getting added to the grid's store, even though it is showing up initially. In fact, it seems like the store isn't actually associated with the grid when using the PagingModelMemoryProxy and BasePagingLoader. I know I must be missing something.

[sven]

As i said:

You add it to the local store which is bound to a loader. This loader serves up the data for you on sort / paging /etc.

So if you load new data or doing a sort, the store data gets replaced with the one from the loader, and there model is not added.

[mabco]

Thanks for the reply, Sven. So, what's the correct way to add a row to a grid that is using the PagingModelMemoryProxy and loader? Sorry, this is my first time trying to use a paging grid and loader. The grids I have used are just plain old store-backed grids, so adding to those is pretty straightforward. Thanks!

[sven]

Add it to the loaders data.