Results 1 to 5 of 5

Thread: Need LiveGrid w/ RpcProxy example

  1. #1
    Sencha User
    Join Date
    Nov 2009
    Location
    Boston area
    Posts
    19

    Default Need LiveGrid w/ RpcProxy example

    The LiveGrid example is great but it seems to be tailored to Json for getting the data.

    Can you provide an example that uses RpcProxy and possibly a BeanModelReader? That would be very instructive.

    I currently have a regular Grid using an RpcProxy with a BeanModelReader reader....but converting that to use a LiveGridView seems to be problematic...the data is returned to the client...but the grid itself is not being shown...although the columns are displayed.

    Many thanks.

  2. #2
    Ext User
    Join Date
    Jan 2009
    Location
    Vienna
    Posts
    65

    Default

    hi,

    i am also looking for an example with a RpcProxy. can someone provide a code-snippet for that?

    thx

  3. #3

    Default Need LiveGrid sample using the BeanModelReader and the RpcProxy

    Ditto, I could use a sample using the BeanModelReader and the RpcProxy.

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    59

    Default

    I managed to get LiveGridView working with RcpProxy. I don't use BeanModelReader but my own subtype of ModelData. I didn't do anything special to get it working.

    But I had a problem using the default GridSelectionModel. It doesn't support LiveGridView! See http://www.extjs.com/forum/showthrea...t=LiveGridView

    What I did instead was implement two new classes: LiveGridSelectionModel and LiveGridViewExtended (see code below). These classes support:

    - Selection of ModelData (Single or Multi)
    - Scroll up and down with arrow keys
    - Select first item on reload

    It is VERY important that you override the equals() method of your model data. If you select an item and scroll down and up again (so that the cache is reloaded) you will not have the same instance of your model data in the selection list and in the ListStore. Therefore we need some intelligent way of comparing models. Therefore I don't think BeanModelReader will work with this new selection model.

    Otherwise I don't do anything special to get LiveGrid working with RcpProxy. Here is how I do it:

    Code:
    loader = new BasePagingLoader<PagingLoadResult<MailItem>>(proxy);
    loader.setRemoteSort(true);
    loader.setSortField("date");
    loader.setSortDir(SortDir.DESC);
    
    // store
    store = new ListStore<MailItem>(loader);
    
    // create columns
    List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
    
    fromCol = new ColumnConfig("from.name", messages.from(), 100);
    toCol = new ColumnConfig("toString", messages.to(), 100);
    subjectCol = new ColumnConfig("subject", messages.subject(), 200);
    
    columns.add(fromCol);  
    columns.add(toCol);
    columns.add(subjectCol);
    
    grid = new Grid<MailItem>(store, cm);
    grid.setAutoExpandColumn("subject");
    grid.setAutoExpandMax(2000);
    	    
    liveView = new LiveGridViewExtended();
    liveView.setRowHeight(23);
    liveView.setEmptyText("Nothing found.");
    selectionModel = new LiveGridSelectionModel(liveView);
    grid.setSelectionModel(selectionModel);
    grid.setView(liveView);
    add(grid);
    And here is the code for the new classes:

    Code:
    import com.extjs.gxt.ui.client.data.ModelData;
    import com.extjs.gxt.ui.client.event.BaseEvent;
    import com.extjs.gxt.ui.client.event.GridEvent;
    import com.extjs.gxt.ui.client.event.Listener;
    import com.extjs.gxt.ui.client.store.Store;
    import com.extjs.gxt.ui.client.store.StoreEvent;
    import com.extjs.gxt.ui.client.store.StoreListener;
    import com.extjs.gxt.ui.client.widget.grid.Grid;
    import com.extjs.gxt.ui.client.widget.grid.GridSelectionModel;
    import com.google.gwt.user.client.Command;
    import com.google.gwt.user.client.DeferredCommand;
    
    /**
     * The default GridSelectionModel doesn't work with LiveGrid. This class together with
     * LiveGridViewExtended supports the following features:
     * 
     * - Selection of ModelData (Single or Multi)
     * - Scroll up and down with arrow keys
     * - Select first item on reload
     * 
     * For this class to work, it is VERY important that you override the equals()
     * method of your model data. If you select an item and scroll down and up again (so that
     * the cache is reloaded) you will not have the same instance of your model data in the 
     * selection list and in the ListStore. Therefore we need some intelligent way of comparing
     * models.
     * 
     * @author bh
     *
     * @param <M>
     */
    public class LiveGridSelectionModel<M extends ModelData> extends GridSelectionModel<ModelData> {
    
    	private LiveGridViewExtended gridView;
    	private boolean selectFirstOnNextLoad = true;
    
    	public LiveGridSelectionModel(LiveGridViewExtended view) {
    		this.gridView = view;
    		view.addListener(view.StoreSet, new Listener<BaseEvent>() {
    			public void handleEvent(BaseEvent be) {
    				
    				// LiveGridView uses two ListStore's. One contains just the models that are currently
    				// displayed on the screen, and the other is a cache store that contains more
    				// models (e.g. 200 at default).
    				// As default the GridSelection model uses the cache store, which results in wrong
    				// selection of items. Therefore we need to use only the display store in the
    				// selection model.
    				listStore = gridView.getDisplayStore();
    				store = gridView.getDisplayStore();
    				store.addStoreListener(new StoreListener<ModelData>() {
    					@Override
    					public void storeAdd(StoreEvent<ModelData> se) {
    						super.storeAdd(se);
    						gridView.refreshSelection();
    						
    						// This is just a handy feature, to select the first item on next reload.
    						if (selectFirstOnNextLoad) {
    							selectFirstOnNextLoad = false;
    							DeferredCommand.addCommand(new Command() {
    								public void execute() {
    									select(0, false);
    								}
    							});
    						}
    					}
    				});
    			}
    		});
    	}
    	
    	/**
    	 * 
    	 * @return returns true if first model in currently displayed list of models is selected on next reload
    	 */
    	public boolean isSelectFirstOnNextLoad() {
    		return selectFirstOnNextLoad;
    	}
    
    	/**
    	 * Use this method if you want to select the first model on next reload (defaults to false)
    	 * 
    	 * @param selectFirstOnNextLoad
    	 */
    	public void setSelectFirstOnNextLoad(boolean selectFirstOnNextLoad) {
    		this.selectFirstOnNextLoad = selectFirstOnNextLoad;
    	}
    	
    	@Override
    	public void bindGrid(Grid grid) {
    		super.bindGrid(grid);
    		listStore = gridView.getDisplayStore();
    	}
    	
    	@Override
    	public void bind(Store store) {
    		super.bind(store);
    		this.store = gridView.getDisplayStore();
    	}
    	
    	/**
    	 * The selection list is automatically cleared when models are removed from
    	 * the display store (e.g. when you scroll up or down). We need to change this
    	 * behavior so that selections are remembered, even if store changes content.
    	 * Therefore the methods refresh() and onClear() are overridden to do nothing.
    	 * 
    	 * Use this method instead to clear selected items.
    	 */
    	public void clearSelected() {
    		selected.clear();
    	    lastSelected = null;
    	}
    	
    	@Override
    	public void refresh() {}
    	
    	@Override
    	protected void onClear(StoreEvent<ModelData> se) {}
    	
    	@Override
    	protected void onKeyUp(GridEvent<ModelData> e) {
    		if (!hasPrevious()) {
    			gridView.scrollUp();
    		}
    		super.onKeyUp(e);
    	}
    	
    	@Override
    	protected void onKeyDown(GridEvent<ModelData> e) {
    		if (!hasNext()) {
    			gridView.scrollDown();
    		}
    		super.onKeyDown(e);
    	}
    }
    Code:
    import java.util.List;
    
    import com.extjs.gxt.ui.client.data.ModelData;
    import com.extjs.gxt.ui.client.event.EventType;
    import com.extjs.gxt.ui.client.store.ListStore;
    import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
    import com.extjs.gxt.ui.client.widget.grid.LiveGridView;
    
    public class LiveGridViewExtended extends LiveGridView {
    	
    	public static EventType StoreSet = new EventType();
    
    	public ListStore<ModelData> getDisplayStore() {
    		return ds;
    	}
    	
    	public ListStore<ModelData> getCacheStore() {
    		return liveStore;
    	}
    	
    	public void refreshSelection() {
    		List<ModelData> selectedItems = grid.getSelectionModel().getSelectedItems();
    		for (ModelData selectedItem : selectedItems) {
    			for (ModelData model : ds.getModels()) {
    				if (model.equals(selectedItem)) {
    					int idx = ds.indexOf(selectedItem);
    					onRowSelect(idx);
    				    break;
    				}
    			}
    		}
    	}
    	
    	public void scrollUp() {
    		if (viewIndex > 0) {
    			updateRows(viewIndex - 1, false);
    		}
    	}
    	
    	public void scrollDown() { 
    		if ((totalCount - getVisibleRowCount()) > viewIndex) {
    			updateRows(viewIndex + 1, false);
    		}
    	}
    	
    	@Override
    	protected void initData(ListStore ds, ColumnModel cm) {
    		super.initData(ds, cm);
    		fireEvent(StoreSet);
    	}
    	
    	@Override
    	public void onRowSelect(int rowIndex) {
    		super.onRowSelect(rowIndex);
    		applyEmptyText();
    	}
    	
    	@Override
    	protected void initElements() {
    		super.initElements();
    		scroller.setStyleAttribute("overflowX", "hidden");
    	}
    	
    	@Override
    	public void refresh(boolean headerToo) {
    		super.refresh(headerToo);
    		refreshSelection();
    	}
    
    }

  5. #5
    Ext GWT Premium Member
    Join Date
    Nov 2008
    Posts
    4

    Default Works For Me :o)

    Cheers baskor, much obliged

    PhilQ.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •