View Full Version : Layout Problem with upgrade to 0.97

15 Oct 2010, 5:11 AM

I'm pretty new to Sencha Touch, but have be working on using the framework to layout my mobile web app. I got it working with version 0.96 and only had problems with Android that I was working out, and could not figure out why the scrolling wasn't functioning.

I've spent the whole day yesterday digging at 0.97 to try to get it work and fix the problem, but ran into the follow issue:

The component layout is being position below the full body height, and I can't figure out why that is and changed.

With 0.96: http://eightyearproject.com/mcgarrybowen/alpha/
With 0.97: http://eightyearproject.com/mcgarrybowen/beta/

Any help will be much appreciated. I know I am using some other JavaScript on this, including jQuery, but I am doing it since the forms aren't fully working on Android.


15 Oct 2010, 7:46 AM
Hi there,

I've got the same problem. I use the layout scheme of the GeoCongress example in my app. With the upgrade to 0.97 all my content moved down by about a screen's height. Weird!

The GeoCongress example has the same problem on my iPod and PC.

Have not found the error so far.

Kind regards,

15 Oct 2010, 8:32 AM
You'll get fun stuff like this with every version bump. It takes a lot of time to get things up to par with each new release, which is why as of .96 I'm content with how things are, no major bugs I need updates on, so will wait a few versions before dedicating time to upgrade again.

I'm no Extjs expert on layouts, but I'll offer up that layout:'auto' has worked quite nicely on my more complex layouts where definitively defining the layout as card or vbox or whatever has brought inconsistent results across versions. So it's something to try.

15 Oct 2010, 9:43 AM

I've included a working example of my layout problem. This worked fine for me in 0.96, but broke with 0.97. The content is painted about one screen below where it should be.

I am probably using layouts wrong. Please help me correct my understanding.

Kind regards,

<title>Layouts Problem</title>

<link rel="stylesheet" href="../lib/sencha/resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="../lib/sencha/ext-touch.js"></script>



//Create Namespaces for this Application
Ext.ns('Layouts', 'Layouts.views', 'Layouts.cache', 'Layouts.stores');

onReady: function() {

//Create new Layouts Application
var app = new Layouts.App();

//Application Class
Layouts.App = Ext.extend(Ext.Panel, {
cls: 'app',
fullscreen: true,
layout: 'card',
activeItem: 0,

initComponent: function() {

this.startScreen = new Layouts.views.StartScreen();

//Set views as application items
this.items = [this.startScreen];

//Initialize class


//Startup Screen Class
Layouts.views.StartScreen = Ext.extend(Ext.Panel, {
cls: 'start-screen',
layout: 'card',
activeItem: 0,

initComponent: function() {
this.list = new Layouts.views.MainMenuList();
this.items = [this.list];

//Data Model for Main Menu Items Store
Ext.regModel('MainMenuItems', {
fields: [

//Data Store for Main Menu Items
Layouts.stores.MainMenuItems = new Ext.data.Store({
model: 'MainMenuItems',
data : [
{title: 'Item 1', image: 'http://www.alquier.org/linfa-net/diary/images/FaceBook.png'},
{title: 'Item 2', image: 'http://www.alquier.org/linfa-net/diary/images/FaceBook.png'},
{title: 'Item 3', image: 'http://www.alquier.org/linfa-net/diary/images/FaceBook.png'},
{title: 'Item 4', image: 'http://www.alquier.org/linfa-net/diary/images/FaceBook.png'}

//Main Menu List Class
Layouts.views.MainMenuList = Ext.extend(Ext.List, {
cls: 'mainmenu-list',
tpl: '<tpl for="."><div class="menu-item"><table><td width="115"><img src="{image}" width="100" /></td><td>{title}</td></table></div></tpl>',
itemSelector: 'div.menu-item',
singleSelect: true,
initComponent: function() {
this.store = Layouts.stores.MainMenuItems;




ps: please ignore the fact that my list item height is not correct in this example....this is not my struggle.

15 Oct 2010, 11:19 AM
Thanks, but switching the layout to 'auto' didn't work, the problem seems to be a generated div that is placed in the body at full width and height and bumps the content below it.

15 Oct 2010, 3:18 PM
I've tried a few more layouts including the demos and can confirm this problem is occurring on every demo I've tried and attempted demos on my own...#HELP

15 Oct 2010, 3:37 PM
I've tried a few more layouts including the demos and can confirm this problem is occurring on every demo I've tried and attempted demos on my own...#HELP

404 on this css file:

See if correcting that takes care of it.

15 Oct 2010, 3:42 PM

Finally figured it out, Apparently there was a chance on the CSS files and from version .95 to .97 the CSS files were changed, so on all demos the CSS files need to be updated and they had not done or noted that.

Mike is right, the file is missing because they are not using anymore, look at the files in the "sencha/resources/css/" directory and make sure you change them to the correct CSS files in the .97 update. "ext-touch.css" changed to "sencha-touch.css".

This simple name changed caused everything to break, but if you make the proper change, everything should work.


15 Oct 2010, 4:07 PM
This is confirmed as fixed, how do you close the thread?

15 Oct 2010, 7:30 PM
Wow, that's the last thing I expected. Thanks for your help.

Just a simple name change on the stylesheets. "ext-touch" -> "sencha touch"

I'm still having trouble debugging web apps. Not as easy as high level languages like C++.