PDA

View Full Version : TreePanel with loadMask



austin1030
7 Feb 2013, 11:44 AM
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


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


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

Arg0n
7 Feb 2013, 1:11 PM
First, Loadmask is debricated.

Use:


component.getEl().mask();
component.getEl().unmask();

Second, when do you want to to show the mask?

austin1030
7 Feb 2013, 1:33 PM
I want to load mask when data is loading for treepanel.

I'll try your method.

halcwb
22 Aug 2013, 9:54 AM
First, Loadmask is debricated.

Use:


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!!

slemmon
22 Aug 2013, 11:10 AM
Not sure why setLoading() isn't working for you. It seemed to be working for me in my test case:



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.

halcwb
22 Aug 2013, 12:34 PM
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/ext-4.2.0.663/ext-all-debug.js
Line 650

slemmon
22 Aug 2013, 3:40 PM
Perhaps the test case below demonstrates what you were seeing (looks like it's an open bug)

at

halcwb
22 Aug 2013, 4:27 PM
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:



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:



Ext.CompentQuery.query('#drugformularytree')[0].setLoading(true);


That does not work in my code either.