PDA

View Full Version : What's wrong with this (possibly a bug?)



senchauser2010
3 Dec 2010, 2:19 PM
The following code works fine on Android emulator, but when running on iphone/android devices or even Safari/Chrome browsers, it only shows the tabs, but they are empty, i.e. the html content is not visible.

However, if I change the orientation to landscape it starts to work and continues to work even in portrait.




Ext.regApplication({
name: "myapp",
defaultTarget: "viewport",
launch: function(){
this.viewport = new myapp.views.Viewport({ application: this });
}
});


myapp.views.Viewport = Ext.extend(Ext.TabPanel, {
id : 'viewport',
fullscreen : true,
layout:'card',
initComponent: function() {
this.panel1 = new Ext.Panel({id:'testpanel1', title:'tab 1', html:'tab 1 html'});
this.panel2 = new Ext.Panel({id:'testpanel2', title:'tab 2', html:'tab 2 html'});
Ext.apply(this, {
items: [this.panel1, this.panel2]
});
myapp.views.Viewport.superclass.initComponent.apply(this, arguments);
}

});



What's wrong with this? Any suggestions welcome.

Thanks.

qooleot
5 Dec 2010, 7:44 AM
can you just do the doLayout() on your tabpanel override (named viewport) in the debugger in chrome and see if that works?

scopendo
6 Jan 2011, 1:12 PM
Unfortunately I'm unable to help, but I can confirm a similar problem. I'm new to web development and am just following along the Sencha Touch Hello World screencast to find that the contents of my TabPanel's tabs doesn't appear in the iPhone simulator (version 4.2) unless I switch orientation.

The code is really simple:


<script type="text/javascript">

new Ext.Application({

name: 'HelloWorld',

launch: function() {

new Ext.TabPanel({

fullscreen: true,

dockedItems: [ { xtype: 'toolbar', title: 'Hello World' } ],

items: [
{ cls: 'hello', title: 'Hello' },
{ cls: 'world', title: 'World' }
],

});

}

});

</script>

Cheers,
Scott

irocker
6 Jan 2011, 1:39 PM
I posted a thread about this several weeks ago.

http://www.sencha.com/forum/showthread.php?119097-Only-part-of-tab-panel-showing-when-loading-on-top-of-another-panel

I did get it to work in Chrome, but on actual phones the panels are empty until I switch orientation.

We really need some response from the Sencha team on this - hard to have much confidence in the platform with a bug like this out there.

senchauser2010
7 Jan 2011, 7:54 PM
It was answered on another thread... it's a bug that will be fixed in 1.0.2. Until then, you need to call "Ext.Viewport.init();" in your launch function manually.

irocker
10 Jan 2011, 11:12 AM
That didn't work for me. :( Do I just have to call the function or does it need any code inside it?

seanrhone
6 Feb 2011, 8:10 AM
Working on the HelloWorld video for Sencha-Touch and it's not working. The intelisence works for Ext.Application but does not seem to recognize "launch" and when I view the page I can see the script source but I do not get the javascript alert. I have read over the code and made sure it's identical to the view (the only difference I see is the version of the touch framework I have is 1.0.1a and the video is using a previous version). I have attached the index.html and would appreciate any help.

Environment:
Running on Macbook Pro with web sharing enabled. using Komodo IDE (just like the video), directory structure is the same as the video.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World</title>
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
new Ext.Application({
name: 'HelloWorld',
launch: function(){
alert('Hello World');
}
})
</script>

</head>
<body></body>
</html>


Unfortunately I'm unable to help, but I can confirm a similar problem. I'm new to web development and am just following along the Sencha Touch Hello World screencast to find that the contents of my TabPanel's tabs doesn't appear in the iPhone simulator (version 4.2) unless I switch orientation.

The code is really simple:


<script type="text/javascript">

new Ext.Application({

name: 'HelloWorld',

launch: function() {

new Ext.TabPanel({

fullscreen: true,

dockedItems: [ { xtype: 'toolbar', title: 'Hello World' } ],

items: [
{ cls: 'hello', title: 'Hello' },
{ cls: 'world', title: 'World' }
],

});

}

});

</script>

Cheers,
Scott

seanrhone
3 Mar 2011, 4:36 AM
Found the issue on my side - For anyone else running this on a MacBook Pro with Apache and getting a 403 error when the .js scripts are loading the fix for me was
1) Edit http.conf and change all AllowOverride None to AllowOverride All
2) Create a .htaccess file in ~/Sites folder with the following lines

Options +FollowSymlinks
RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.html/$1 [L,QSA]

Once I made these changes the hello world app began working.

You can change the last line "index.html" to what every file name you are using