PDA

View Full Version : Extending an Application affects rendering on iPhone



welshcathy
11 Aug 2011, 5:00 AM
For various reasons I wanted to extend the application class, but found that when I do this it causes everything to be very small when viewed on the iPhone.

On the desktop everything is rendered as normal.
I haven't had a chance to test on any other devices.
I was testing on Windows XP using the standard stylesheet delivered in:
sencha-touch.1.1.0/resources/css/apple.css

I've attached images showing just the toolbar, but any other components that are added to the application are rendered very small too.

The one with the proper size toolbar is using

MYAPP = new Ext.Application({
name: "MYAPP",
launch: function() {
Ext.dispatch({
controller: 'controller',
action: 'doLaunch',
app: this
});
}
});

The one with the smaller toolbar uses :

MYAPPApplication = Ext.extend(Ext.Application, {
name: "MYAPP",
launch: function() {
Ext.dispatch({
controller: 'controller',
action: 'doLaunch',
app: this
});
}
});
MYAPP = new MYAPPApplication();

Here's an fuller example so you can comment in/out the different versions


/**
* THIS VERSION WORKS OK
*/
/*
MYAPP = new Ext.Application({

name: "MYAPP",
launch: function() {
Ext.dispatch({
controller: 'controller',
action: 'doLaunch',
app: this
});
}
});
*/




/**
* THIS VERSION TURNS OUT VERY SMALL ON AN IPHONE
* BUT LOOKS FINE ON THE DESKTOP
*/
MYAPPApplication = Ext.extend(Ext.Application, {

name: "MYAPP",
launch: function() {
Ext.dispatch({
controller: 'controller',
action: 'doLaunch',
app: this
});
}
});
MYAPP = new MYAPPApplication();






Ext.regController('controller', {
doLaunch: function(params){

// set up reference to application
this.app = params.app;
this.doRenderViewport();

},

doRenderViewport: function(){
// render the main viewport
this.Viewport = this.render({
xtype: 'panel',
fullscreen: true,
dockedItems: [{
xtype: 'toolbar',
title: 'Viewport',
dock: 'top'
}]
}, Ext.getBody());

}
});


2744027439

welshcathy
11 Aug 2011, 5:12 AM
Just to clarify why I wanted to extend Ext.Application in the first place.
I want to namespace various other objects in the same namespace as the application.

i.e.
MYAPP.proxies
MYAPP.plugin .... etc

If I declare these early on, when the application is instantiated it writes over all of these namespaces.
If I declare these in application.launch() it's too late, as the resources that need these namespaces have already been loaded.
So I was extending the application so I could use the constructor to create these namespaces, in the same way that the standard application creates namespaces for views, models etc.

I am using the workaround of declaring these namespaces just before the various objects that need them, which works perfectly well, just isn't quite as tidy!

Cheers,

Cathy