PDA

View Full Version : Tree with LoadMask



ero
20 Jan 2012, 4:14 AM
Hello, I've been trying to get a load mask working with a treepanel without success.

Code:



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

layout: 'fit',
closable: true,

initComponent: function() {

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

this.callParent(arguments);

}

});




Ext.define('MyApp.view.MyTree', {
extend: 'Ext.tree.Panel'
alias: 'widget.myTree',

rootVisible: false,
useArrows: true,

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

this.store = ({
xtype: 'treestore',
root: { expanded: true },
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/showthread.php?131684-Apply-loadMask-for-tree&highlight=tree+loadmask

and

http://www.sencha.com/forum/showthread.php?153894-ExtJS-4-Tree-Panel-Load-Mask&highlight=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,

tvanzoelen
20 Jan 2012, 4:47 AM
If you want a loadMask on the body then, on beforeLoad event of the TreeStore you could set the viewport loading



viewport.setLoading(msg)


on loadEvent disable it



viewport.setLoading(false)


loadMasks on the body is bugy.

ero
24 Jan 2012, 8:13 AM
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.

jay@moduscreate.com
24 Jan 2012, 9:34 AM
You should mask only when a component is rendered.

lorezyra
24 Jan 2012, 4:08 PM
...
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.

tvanzoelen
25 Jan 2012, 12:27 AM
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.

ero
25 Jan 2012, 2:41 AM
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:


init: function() {
this.control({
'myPanel': {
render: this.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?