PDA

View Full Version : Loading text does not go away after my list is loaded, whats wrong?



koolaid1551
29 Jul 2011, 7:46 AM
For some reason I can't get the loading message to go away after my list is loaded. Everything in the list works perfectly fine and all the data is loaded. Here is my code:



myapp.views.SetList = Ext.extend(Ext.Panel, {
layout: "card",
initComponent: function () {
this.list = new Ext.List({
grouped: false,
itemTpl: '<span class="name">{name}</span>',
loadingText: false,
store: new Ext.data.Store({
model: 'Channel',
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'channels'
}
}
})
});
this.list.on("selectionchange", this.onSelect, this);
this.list.on("render", function () {
this.list.store.load();
this.list.el.mask('<span class="top"></span><span class="right"></span><span class="bottom"></span><span class="left"></span>', "x-spinner", false)
}, this);
this.listpanel = new Ext.Panel({
layout: "fit",
items: this.list,
dockedItems: [{
xtype: "toolbar",
title: "Cheeze Curds"
}],
listeners: {
activate: {
fn: function () {
this.list.getSelectionModel().deselectAll()
},
scope: this
}
}
});
this.items = this.listpanel;
myapp.views.SetList.superclass.initComponent.call(this)
},
onSelect: function (c, a) {
if (a[0] !== undefined) {
var b = new cheezecurds.views.SetDetail({
prevCard: this.listpanel,
record: a[0]
});
this.setActiveItem(b, "slide")
}
}
});
Ext.reg("setlist", myapp.views.SetList);

jjerome
29 Jul 2011, 8:03 AM
Try creating a LoadMask and binding it to the store instead of using el.mask()



loadmask = new Ext.LoadMask(Ext.getBody(), {
msg: "Loading...",
store: this.list.store
});

koolaid1551
29 Jul 2011, 8:27 AM
Try creating a LoadMask and binding it to the store instead of using el.mask()



loadmask = new Ext.LoadMask(Ext.getBody(), {
msg: "Loading...",
store: this.list.store
});


Thanks for your reply, I just released I didn't take take the mask off. I took the mask off with the following code



this.list.on("afterrender", function () {
this.list.el.unmask()
}, this);

jjerome
29 Jul 2011, 9:10 AM
Thanks for your reply, I just released I didn't take take the mask off. I took the mask off with the following code



this.list.on("afterrender", function () {
this.list.el.unmask()
}, this);


Okay, now that makes it a little more unusual.. I'll look into more of that unmask method. Are those events firing for you at the right times?

Edit: Maybe, instead of binding the mask to the el, bind it to the body?

koolaid1551
29 Jul 2011, 9:35 AM
I'm not sure if the events are firing at the right time, I never actually see the spinner now but that could be because my data file isn't that large. On the other hand if i were to replace the el with with body my app doesnt even load.

jjerome
29 Jul 2011, 9:51 AM
Try doing it the way I posted the way before with the Ext.LoadMask


If you want to look into your way of creating the mask, here is the source code:



/**
* Puts a mask over this element to disable user interaction.
* This method can only be applied to elements which accept child nodes.
* @param {String} msg (optional) A message to display in the mask. This can be html.
* @param {String} msgCls (optional) A css class to apply to the msg element
* @param {Boolean} transparent (optional) False to show make the mask gray with opacity. (defaults to true)
* @return {Element} The mask element
*/
mask: function(msg, msgCls, transparent) {
var me = this,
dom = me.dom,
el = Ext.Element.data(dom, 'mask'),
mask,
size,
cls = '';

me.addCls('x-masked');
if (me.getStyle("position") == "static") {
me.addCls('x-masked-relative');
}
if (el) {
el.remove();
}
if (Ext.isString(msgCls) && !Ext.isEmpty(msgCls)) {
cls = ' ' + msgCls;
}
else {
if (msgCls) {
cls = ' x-mask-gray';
}
}

mask = me.createChild({
cls: 'x-mask' + ((transparent !== false) ? '' : ' x-mask-gray'),
html: msg ? ('' + msg + '') : ''
});

size = me.getSize();

Ext.Element.data(dom, 'mask', mask);

if (dom === document.body) {
size.height = window.innerHeight;
if (me.orientationHandler) {
Ext.EventManager.unOrientationChange(me.orientationHandler, me);
}

me.orientationHandler = function() {
size = me.getSize();
size.height = window.innerHeight;
mask.setSize(size);
};

Ext.EventManager.onOrientationChange(me.orientationHandler, me);
}
mask.setSize(size);
if (Ext.is.iPad) {
Ext.repaint();
}
},

/**
* Removes a previously applied mask.
*/
unmask: function() {
var me = this,
dom = me.dom,
mask = Ext.Element.data(dom, 'mask');

if (mask) {
mask.remove();
Ext.Element.data(dom, 'mask', undefined);
}
me.removeCls(['x-masked', 'x-masked-relative']);

if (dom === document.body) {
Ext.EventManager.unOrientationChange(me.orientationHandler, me);
delete me.orientationHandler;
}
},

koolaid1551
2 Aug 2011, 6:08 AM
Is there a way to add the loadmask to the panel at the beginning and wait till the whole panel finishes loading and then removes the loadmask at the end, instead of just having hte loader when the list store loads?

I tried the code below and put I don't see any loadmask. I put loadmask.show(); at the beginning and loadmask.hide(); at the end. However if I take the loadmask.hide(); out I will see the loadmask but obviously it won't disappear.



fireEvent: function () {
loadmask = new Ext.LoadMask(Ext.getBody(), {
msg: "Loading...",
});
loadmask.show();
},


fireEvent: function () {
loadmask.hide();
}