PDA

View Full Version : Sencha 2.2.1 works in Chrome and Safari but shows a blank screen as a native app



Mikele
29 Jul 2013, 5:00 AM
Hi!

I have created a small app using some panels, navigation views, lists, charts ect. The application works fine in Chrome and Safari, it also works on an Android and iOS device as long as I run it in the smartphones browser.

I have created a native Android and iOS app. When I try to open the app I got a blank screen. I spend several hours to find out what code causes this blank screen. I added every panel and every line of code step by step and I found out, that e.g. if I use a List and add a listpaging plugin or a pullrefresh plugin it stops working:



plugins: [
{
type: 'listpaging'
}
]


Just this little code causes the blank screen on my native app if I try to load the specific panel.

I also get a blank screen in my native app when I add a chart to the panel that I want to load. If I delete these components from my app, than it works fine as native Android and iOS.

I think it might have something to do with the js libraries, but that's already the standard configuration that Architekt 2 does:



<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>MyApp</title>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/touch/sencha-touch-2.2.1/resources/css/sencha-touch.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>


Does anyone had a similar issue with his native app?

Thank you!

Mikele

bt_bruno
29 Jul 2013, 3:19 PM
Hi @Mikele, that sounds like the framework trying to load the 'listpaging' plugin dynamically. It will fail as a packaged app. It's related to XHR requests and cross-domain exceptions.

You should not use "development" mode on a package app (I see your code you have microloader/development.js).

Under development, if you see any warnings like the one below, please make sure you fix them before going native.


[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.plugin.ListPaging'; consider adding 'Ext.plugin.ListPaging' explicitly as a require of the corresponding class

When you have all requirements fixed, package your app with Cmd using this mode:


sencha app build package

In this mode is easier to find errors and go native.

Mikele
29 Jul 2013, 11:55 PM
Thank you Bruno! That's a good approach!

I will have a try and give you feedback asap!

Mikele

Mikele
1 Aug 2013, 9:40 AM
Bruno, your hint was very great, using packaging mode shows the same result as creating a native app.

But I was not able to reslove my main issue.

I eliminated a few warnings that belongs to another panel and I changed the index.html to get rid of the microloader to


<script src="touch/sencha-touch-all.js"></script>
<link rel="stylesheet" href="resources/css/default-theme.css">
<link rel="stylesheet" href="http://cdn.sencha.com/touch/sencha-touch-2.2.1/resources/css/sencha-touch.css">
<script type="text/javascript" src="app.js"></script>

Furthermore I opened the app.jason file and changed the js config to


"js": [
{
"path": "touch/sencha-touch-all.js",
"x-bootstrap": true
},
{
"path": "app.js",
"bundle": true,
"update": "full"
}
],

to load the whole js at once.

If I add the pullrefresh plugin into my panel will not be showen anymore. But I don't have any error in Firebug that would lead to a missing javascript file. I also load all data directly so it could be no cross domain thing.

Do you have another idea what could missing? Before I create sencha app build package it works fine, after that it does not work anymore when I have added a plugin.

Thank you!

Mikele

Mikele
1 Aug 2013, 10:31 AM
Add: Also an easy Ext.Msg.Alert... does not work for me in package or native mode. :-| But all other things works fine (besides the already mentioned things).

Mikele
4 Aug 2013, 9:20 AM
Now I made some additional tests to come forward. I created a new app, just to test if Ext.Msg.alert() will work in this little demo:


Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',

config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Test'
},
{
xtype: 'button',
itemId: 'mybutton',
text: 'MyButton'
}
],
listeners: [
{
fn: 'onMybuttonTap',
event: 'tap',
delegate: '#mybutton'
}
]
},

onMybuttonTap: function(button, e, eOpts) {
Ext.Msg.alert('Status', 'Changes saved successfully.');
}

});

The app should show a message when the button is hit, very easy. It works fine in Chrome and Safari (before packaging).

When I package this app using


sencha app build package

it does not work anymore in Chrome and Safari. I hit the button an nothing happens.

Everything is on default in this 3 minutes app, like my index.html


<!DOCTYPE HTML>

<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>Nativetest</title>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
<script>
var Ext = Ext || {};
Ext.theme = {
name: "Default"
};
</script>
<link rel="stylesheet" href="http://cdn.sencha.com/touch/sencha-touch-2.2.1/resources/css/sencha-touch.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

Any further ideas on this topic?

Thank you!

Mikele

Mikele
4 Aug 2013, 10:03 AM
A little


requires: [
'Ext.MessageBox',
'Ext.plugin.PullRefresh'...

did the trick!

Now it runs perfectly on the iPhone! :D

Mikele

bt_bruno
6 Aug 2013, 8:39 AM
Nice ;) Just a detail you have to be aware of on the code below. You're using toolbar, button and messagebox components, but nowhere telling that these are required by the class.

Remember to require components on each class they are used. This will ensure your classes don't break.


Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',


requires: [ // this is necessary
'Ext.Button',
'Ext.MessageBox',
'Ext.Toolbar'
],

config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Test'
},
{
xtype: 'button',
itemId: 'mybutton',
text: 'MyButton'
}
],
listeners: [
{
fn: 'onMybuttonTap',
event: 'tap',
delegate: '#mybutton'
}
]
},

onMybuttonTap: function(button, e, eOpts) {
Ext.Msg.alert('Status', 'Changes saved successfully.');
}

});

Greg Arnott
14 Oct 2013, 9:30 PM
Listpaging was regularly offering buckets of grief until I added it as:


plugins: [
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true,
noMoreRecordsText: ' ',
type: 'listpaging'
}
]


Without xclass explicitly defined, the plugin would cause some grief - no matter how or where it was referenced as required. Architect adds solely the type - which should be enough with a required, but alas no.