Hybrid View

  1. #1
    Ext GWT Premium Member
    Join Date
    Jun 2009
    Location
    Bath, UK
    Posts
    28
    Vote Rating
    0
    dno is on a distinguished road

      0  

    Default Load feedback for ASync tree

    Load feedback for ASync tree


    I've got a Tree and I'm using a TreeLoader to load nodes asynchronously. The backend data takes a few seconds to generate, so I need to show some feedback to show that the child nodes are loading. In GXT 2.x there was a spinner icon to indicate this, however this doesn't seem to be supported in GXT 3.

    Looking in the source for TreeView.java I see:

    Code:
      public void onLoading(TreeNode<M> node) {
        // onIconStyleChange(node, IconHelper.createStyle("x-tree3-loading"));
      }
    Does this mean this hasn't been implemented, or am I supposed to do something with this myself? There doesn't seem to be anything in TreeAppearance render a loading node.

  2. #2
    Sencha User
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    diegop is on a distinguished road

      0  

    Default method createStyle in IconHelper

    method createStyle in IconHelper


    The method createStyle in IconHelper has been removed in GXT 3, I am still trying to find a way to set an icon from a css style and not from a resource bundle.
    If you find a way, please post your solution.

  3. #3
    Ext GWT Premium Member
    Join Date
    Jun 2009
    Location
    Bath, UK
    Posts
    28
    Vote Rating
    0
    dno is on a distinguished road

      0  

    Default


    Is anyone from Sencha able to comment on whether an Async tree is supposed to provide load-feedback?

    Thanks.

  4. #4
    Sencha User
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    diegop is on a distinguished road

      0  

    Default loading image feedback

    loading image feedback


    I solved this by implementing the AsyncCallback interface :

    Code:
    public abstract class IconAsyncCall<T> implements AsyncCallback<T> {
    	private SplashImage loadgif;
    	
    	 public IconAsyncCall(String title, String message)
    	    {
    	       loadgif = new SplashImage(message);
    	       RootPanel.get().add(loadgif);
    	       
    	    }
       
    	 
    	 
    	    public final void onFailure(Throwable caught) 
    	    {    
    	    	RootPanel.get().remove(loadgif);    
    	    	onRPCCallFailure(caught); 
    	    } 
    
    
    	    public final void onSuccess(T result) 
    	    {       
    	    	RootPanel.get().remove(loadgif);         
    	        onRPCCallSuccess(result);     
    	    }
    	    
    	    /** the failure method needed to be overwritte */   
    	    protected abstract void onRPCCallFailure(Throwable caught); 
    	    
    	    
    	    /** overwritte to do something with result */
    	    protected abstract void onRPCCallSuccess(T result); 
        
        
        
    }
    while SplashImage object is just an little contentPanel in which you can put the image you want
    (which you can define in the css or in the code)

    to use this implementation :

    Code:
    rpcService.rpcMethod(param,	new IconAsyncCall<CCtLoginUser>() {
    					
    							@Override
    							protected void onRPCCallFailure(Throwable caught) {
    							 .....
                                 ......							 
    							}
    
    
    							@Override
    							protected void onRPCCallSuccess(CCtLoginUser result) {
    								if(result == null)									
    									return ;
    					            
    								//do something with the result
    							
    							}
    						});
    			}
    In this way the contentPanel with the loading icon will appears when making the rpc call and will dissapear
    when it returns

  5. #5
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Vote Rating
    88
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    That's one way to solve this, but as with almost any problem there are several correct answers. They probably all follow the basic structure you used: monitor the beginning and the end of the RPC call, and use that notification to display a loading image over the screen. This is the main way to think through a problem like this, though perhaps I can suggest a slightly different way to do each of these two tasks.

    To monitor the beginning and end of the loading process, consider listening to the events issues from the Loader (probably TreeLoader in your case): Listen for BeforeLoadEvent to add the notification, and LoadEvent/LoadExceptionEvent to hide it.

    Another way to indicate that loading is occurring would be to use the mask(String) method, available on all components. You could call tree.mask("Loading...") to display the initial notification, and tree.unmask() to dismiss it. This can give you consistent loading notifications on each widget, though not for the entire page (that can be done with Mask.mask(Document.get().getBody().cast(), "Loading"), for example), which may or may not be what you are after. The visual appearance of the mask can be changed by implementing the MaskAppearance interface, and building a rebind rule to ask the app to always use that new mask instead.

    There's nothing wrong with your approach, just wanted to spell our that your strategy makes sense, and how else the same strategy might be followed.

  6. #6
    Sencha User
    Join Date
    Jul 2011
    Posts
    1
    Vote Rating
    0
    vtortsev is on a distinguished road

      0  

    Default


    i would done so:
    Code:
    tree.setView(new TreeView<BaseObject>() {
                @Override
                public void onLoading(TreeNode<BaseObject> node) {
                    onIconStyleChange(node, loadingIcon);
                    super.onLoading(node);
                }
            });