PDA

View Full Version : Ext.Application and Ext.Viewport



jeffremer
2 Dec 2010, 6:39 PM
Ext.setup is nice in that it automatically calls Ext.Viewport.init for you. However, I'm having trouble getting it worked into Ext.regApplication.

Anyone have any luck using the Sencha Touch MVC architecture and taking advantage of the browser chrome hiding with Ext.Viewport.init?

edspencer
10 Dec 2010, 6:32 PM
There was a bug in this with 1.0.1. The next release will work the same way as Ext.setup and call Ext.Viewport.init for you again

jeffremer
14 Dec 2010, 10:40 AM
Thanks Ed - I guess it's the case in 1.0 since that's what we're developing with. Our current workaround is to create our main application viewport at the end of the application launch method as a callback to Ext.Viewport.init.

Unfortunately this seems to cause a problem with the loading spinner since the viewport gets repositioned - the side effect being that the entire load mask gets shifted up and leaves a blank space at the bottom. Since there is a considerable delay before the callback inside Ext.Viewport.init gets called we ended up patching it to accept two callbacks, one that runs right after the scrollToTop() call and the original one.

To get the desired effect we start a loading spinner inside the callback right after the scrollToTop call, that way the load mask is correctly positioned.

Something like this:

Ext.Viewport.init(fn, beforeFn):



init: function(fn, beforeFn) { // Note the new second param
...
setTimeout(function() {
me.scrollToTop();
if(beforeFn) beforeFn(); // Call the before function callback
setTimeout(function() {

Ext.getBody().setStyle('overflow', 'hidden');

if (Ext.is.Android && me.stretchEl) {
me.stretchEl.remove();
delete me.stretchEl;
}

if (fn) {
setTimeout(function() {
fn(); // Original callback...

if (!Ext.is.Android) {
me.updateBodySize();
}
}, 500);
}
}, 200);
}, 500);

...
}
Our application inside launch():



...
Ext.Viewport.init(
function(){
application.createViewport();
application.initialDispatch();
application.cleanup();
},
function(){
Wbx.utils.toggleLoading(true); // Turn loading spinner on
}
);
...
It'd be great to know if with the new way that Ext.Viewport.init will be called if the application load mask will work as expected.