1. #1
    Sencha User
    Join Date
    Oct 2010
    Location
    France
    Posts
    37
    Answers
    2
    Vote Rating
    0
    ero is on a distinguished road

      0  

    Default Unanswered: Tree with LoadMask

    Unanswered: Tree with LoadMask


    Hello, I've been trying to get a load mask working with a treepanel without success.

    Code:

    PHP Code:
    Ext.define('MyApp.view.MyPanel', {  extend'Ext.panel.Panel',
      
    alias'widget.myPanel',

      
    layout'fit',
      
    closabletrue,

      
    initComponent: function() {
            
        
    this.items =Ext.create('MyApp.view.isitexfer.MyTree', {vsParamsthis.vsParams});

        
    this.callParent(arguments);
        
      }
        
    }); 
    PHP Code:
    Ext.define('MyApp.view.MyTree', {
      
    extend'Ext.tree.Panel'
      
    alias'widget.myTree',

      
    rootVisiblefalse,
      
    useArrowstrue,

      
    columns: [
        { 
    xtype:"vsTreeColumn"width150 },
        { 
    xtype:"countReferencesColumn" },
        { 
    xtype:"totalValueTransferredColumn" }
      ]                    
      
    initComponent: function() {

        
    this.store = ({
         
    xtype'treestore',
         
    root: { expandedtrue },
         
    proxy: { type'ajax',url'app/data/myScript.php?vsParams=' +Ext.JSON.encode(this.vsParams) },
         
    fields: [
          {
    name:'myRow'type'string'},
          {
    name'countReferences'type'string'},
          {
    name'totalValueTransferred'type'string'
         
    ]
       });

      
    this.callParent(arguments);
        
      }
    }); 
    I've looked at the following two thread, but not success with those either:

    http://www.sencha.com/forum/showthre...=tree+loadmask

    and

    http://www.sencha.com/forum/showthre...=loadmask+tree

    Ideally I would like apply the loadmask to the body as follows:

    var loadMask = new Ext.LoadMask(Ext.getBody(), {store: store, msg:'My text'});

    If I set rootVisible to true and root expanded to false (in the store), I can then click on the root node to expand the tree and the loadmask will work as desired. However, the mask is not applied during store load, but once the tree is expanded. I would prefer to not have the root visible and have the body masked when the data for the store is being retrieved.

    Any ideas?

    Thank you,

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    If you want a loadMask on the body then, on beforeLoad event of the TreeStore you could set the viewport loading

    Code:
     viewport.setLoading(msg)
    on loadEvent disable it

    Code:
     viewport.setLoading(false)
    loadMasks on the body is bugy.

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Location
    France
    Posts
    37
    Answers
    2
    Vote Rating
    0
    ero is on a distinguished road

      0  

    Default


    Hi tvanzoelen, thanks for your response.

    When you do the viewport.setLoading(msg) are you putting it in the controller?

    As best as I can tell, to set the listener on the store, it needs to be done via the controller in the init() method. However, when I do this, I find that the listener fires at launch and therefore the viewport is not defined.

  4. #4
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Answers
    102
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    You should mask only when a component is rendered.

  5. #5
    Sencha Premium Member lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 日本
    Posts
    635
    Answers
    9
    Vote Rating
    15
    lorezyra will become famous soon enough lorezyra will become famous soon enough

      0  

    Default


    Quote Originally Posted by ero View Post
    ...
    As best as I can tell, to set the listener on the store, it needs to be done via the controller in the init() method. However, when I do this, I find that the listener fires at launch and therefore the viewport is not defined.
    You can create an "afterrender" event on the view to setup the beforeload and load Events for the treeStore.
    Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

    When in doubt, check the d4mn source code!
    ================================================
    And here are my terms...
    1. I don't care if you use my source code. (Known as "Code.")
    2. I don't care if I get any monetary compensation.
    3. I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.
    4. Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.
    5. By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.
    6. You are welcome to change and improve the Code to best meet your needs.
    7. I don't care if you use the Code in a commercial or open-source project.
    8. You are not required to contact me prior to using the Code.
    ================================================
    Simple. Enjoy.

  6. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Using setLoading will probably protect you from putting loadmask on unrendered components. Instead of setting the loadmask on the viewport you can set it on every component I think.

    In your case you can also set it on the widget.myPanel instead of the viewport.

  7. #7
    Sencha User
    Join Date
    Oct 2010
    Location
    France
    Posts
    37
    Answers
    2
    Vote Rating
    0
    ero is on a distinguished road

      0  

    Default


    I've just realized the silly mistake I was making previously in applying the store.on() method within the init() method - thank you for all the responses.

    I have it working now, but for some reason I can either get the mask to display and stay displayed when not applying setLoading(false) after setLoading(msg) or it never displays when applying setLoading(false) after setLoading(msg).

    Contoller:
    PHP Code:
    init: function() {
      
    this.control({
        
    'myPanel': {
          
    renderthis.mask
        
    }  }); 
    },


    mask: function (report) {
      var 
    store this.getIsitexferHighSummaryStore(),
      
    vp Ext.ComponentQuery.query('mainInterface')[0];

      
    store.on('beforeload'vp.setLoading('Masking') );
      
    store.on('load'vp.setLoading(false) );        

    I've tested with render, afterrender, and beforerender - all show the same results.

    Could it be that the store is loading too fast?