1. #1
    Sencha Premium Member austin1030's Avatar
    Join Date
    Feb 2008
    Location
    Hanover, Maryland
    Posts
    103
    Vote Rating
    1
    Answers
    1
    austin1030 is on a distinguished road

      0  

    Default Unanswered: TreePanel with loadMask

    Unanswered: TreePanel with loadMask


    Hi

    I've been looking for a solution for loadMask on my TreePanel.

    Since, I don't know which version, loadMask for TreePanel no longer works.

    Here how I set up my code.

    panel.js
    Code:
    createEmpPanel: function(){                
            this.leftPanel = Ext.create('widget.emptreelist', {                
                region: 'west',
                collapsible: true,
                width: isMaster(currstatus)? 315 : isUser(currstatus)? 200 : 280,
                minWidth: isMaster(currstatus)? 315 : isUser(currstatus)? 200 : 280,
                split: true,            
                padding: '0 0 0 1',                        
                listeners: {
                  scope: this,
                  itemdblclick: this.onEmpSelect
                }
            });
    
            return this.leftPanel;
        },
    treePanel.js
    Code:
    Ext.apply(this, {                        
              store: this.createTreeStore(),
              tbar: this.topToolbar,                    
              bbar: this.bottomToolbar,                        
              viewConfig: {
                     scope: this,                                        
                     listeners: {                                        
                            itemcontextmenu: function(view, record, node, index, e) {
                                     e.stopEvent();
                                     if(record.get('cls') == 'user') {                                                     
                                       userMenu1.showAt(e.getXY());
                                    } else if(record.get('cls') == 'inactive-user') {                                                     
                                       userMenu2.showAt(e.getXY());
                                    } else {
                                        folderMenu.showAt(e.getXY());
                                    }
                                     return false;
                            }
                     }
            }
    });
    I just couldn't figure out where I should setup setLoading() or other method.

    Thanks for your help

  2. #2
    Sencha User Arg0n's Avatar
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    122
    Vote Rating
    16
    Answers
    12
    Arg0n will become famous soon enough Arg0n will become famous soon enough

      0  

    Default


    First, Loadmask is debricated.

    Use:

    Code:
    component.getEl().mask(); 
    component.getEl().unmask();
    Second, when do you want to to show the mask?

  3. #3
    Sencha Premium Member austin1030's Avatar
    Join Date
    Feb 2008
    Location
    Hanover, Maryland
    Posts
    103
    Vote Rating
    1
    Answers
    1
    austin1030 is on a distinguished road

      0  

    Default


    I want to load mask when data is loading for treepanel.

    I'll try your method.

  4. #4
    Ext Premium Member halcwb's Avatar
    Join Date
    Mar 2010
    Location
    Rotterdam
    Posts
    382
    Vote Rating
    52
    Answers
    10
    halcwb has a spectacular aura about halcwb has a spectacular aura about halcwb has a spectacular aura about

      0  

    Default


    Quote Originally Posted by Arg0n View Post
    First, Loadmask is debricated.

    Use:

    Code:
    component.getEl().mask(); 
    component.getEl().unmask();
    Second, when do you want to to show the mask?
    Thanks for the tip! Actually, you have to supply a message to really making it a loading mask.

    But the fact that it is deprecated? Sencha, please, there is nothing in the docs, suggesting this. Moreover, I tried 'the official way' using setLoading, but that doesn't work!

    Please, update your api docs!!

  5. #5
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Not sure why setLoading() isn't working for you. It seemed to be working for me in my test case:

    Code:
    var store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            children: [
                { text: "detention", leaf: true },
                { text: "homework", expanded: true, children: [
                    { text: "book report", leaf: true },
                    { text: "algebra", leaf: true}
                ] },
                { text: "buy lottery tickets", leaf: true }
            ]
        }
    });
    
    
    var tree = Ext.create('Ext.tree.Panel', {
        title: 'Simple Tree',
        width: 200,
        height: 150,
        store: store,
        rootVisible: false,
        renderTo: Ext.getBody()
    });
    
    
    Ext.widget('button', {
        renderTo: document.body,
        enableToggle: true,
        text: 'setLoading()',
        toggleHandler: function (btn, pressed) {
            tree.setLoading(pressed);
        }
    });
    Perhaps you can post your own test case where it's not working?

    Ext.LoadMask isn't itself deprecated. The use of it on Ext.dom.Elements is no longer recommended (use element.mask / unmask), but it's fine for use with components.

  6. #6
    Ext Premium Member halcwb's Avatar
    Join Date
    Mar 2010
    Location
    Rotterdam
    Posts
    382
    Vote Rating
    52
    Answers
    10
    halcwb has a spectacular aura about halcwb has a spectacular aura about halcwb has a spectacular aura about

      0  

    Default


    Thanks for looking into this. Apparently, setLoading is not working in all treepanel cases. I have my treepanel nested in a collapsible tabpanel (so, it is one of the tabs). So, it could be that the z-index of the load mask isn't right and that it is behind the treepanel in a nested scenario?

    If I have some time left I will try and come up with an isolated test case. But the getEl().mask() is working for me right now. Also, I am using ....

    And that's funny I do Ext.Version() and what do I get:

    TypeError: version is undefined
    http://localhost/lib/ext-4.2.0-gpl/e...t-all-debug.js
    Line 650

  7. #7
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      1  

    Default


    Perhaps the test case below demonstrates what you were seeing (looks like it's an open bug)


  8. #8
    Ext Premium Member halcwb's Avatar
    Join Date
    Mar 2010
    Location
    Rotterdam
    Posts
    382
    Vote Rating
    52
    Answers
    10
    halcwb has a spectacular aura about halcwb has a spectacular aura about halcwb has a spectacular aura about

      0  

    Default


    Well, actually, when I run the fiddle everything seems fine. Indeed the use case is that you load the tree store when the root is set to not visible. As you do not expand, the regular tree won't show you a loading sign.

    Thanks for looking into this.

    Also, in my code the trigger to load the store combined with setting the loadmask is expanding the panel. I have my controller listening to the expand event and reacting like this:

    Code:
        onExpandDrugFormularyTree: function (tabpanel) {
            var me = this,
                tree = tabpanel.down('#drugformularytree'),
                callbackFn = _.partial(me.onTreeStoreLoad, tree);
            // Only run this method once
            if (me.hasLoaded) return;
            // Set up loading mask
            tree.getEl().mask('loading Formulary');
            // Start loading the store
            tree.store.load({
                callback: callbackFn,
                scope: me
            });
        },
    
    
        onTreeStoreLoad: function (tree) {
            var me = this;
            // Make sure that root nodes get only loaded once
            me.hasLoaded = true;
            // Remove loading mask
            tree.getEl().unmask();
            // Expand the root nodes
            tree.getRootNode().expand();
        }
    Note also that the tree is nested in a tabpanel. I also tried to set the mask in the console, like:

    Code:
    Ext.CompentQuery.query('#drugformularytree')[0].setLoading(true);
    That does not work in my code either.

Thread Participants: 3

Tags for this Thread