PDA

View Full Version : iPhone - Scrolling issues



ajaytaksali
16 Mar 2011, 10:46 PM
Hi,

We have developed a mobile app using Sencha Touch which could be accessed through iPad, iPhone, Galaxy and other hand-held devices. Application is working as expected on other devices, however on iPhone form scrolling is not smooth. When I pull the screen down it begins to scroll a little bit but then "bounces" and goes back up to the top. Therefore, I cannot get to the other fields on the form, including the action buttons. If I do some really weird maneuvers, using circular motions and very quick down-to-up motions with my fingers, I am able to get it to scroll. However, it is just not usable like other iPhone apps.

Has anyone encountered such issue before. Please let me know how can I fix it.

Regards,
Ajay

ajaytaksali
16 Mar 2011, 10:59 PM
Some more details:

I am using sencha-touch-1.0.1 on iPhone3.

-Ajay

ajaytaksali
24 Mar 2011, 8:29 PM
Can anyone update me if this is still the issue with the current release of Sencha Touch.

Jack9
25 Mar 2011, 10:28 AM
When a fullscreen:true (for scrolling) Ext.List is placed in a tabPanel, the List doesn't know about the tabPanel's tabBar. If your tabbar is at the bottom, the listview can be temporarily dragged to see the list item(s) that are hidden by the tabbar, but immediately snaps back. How do I set the Ext.List to know what it's proper viewable size is?

bobvandell
25 Mar 2011, 1:32 PM
Try adding "pinHeaders: true" and "scroll: 'vertical'" to your lists.

pinHeaders: true is on by default in 1.1.

Jack9
25 Mar 2011, 2:22 PM
Adding pinHeaders to my list was not effective. I've ended up with something like this:


ListItems = Ext.extend(Ext.List, {
initComponent:function() {
var config = {
scroll: 'vertical'
,fullscreen: true
,itemSelector:'div.list_item' //silently adding a new class x-item-selected to any <div class="list_item"/> that is clicked
,itemTpl: [
templateString
]
,store: new ListItemStore()
,listeners:{
afterRender:function(){
this.setHeight(this.getHeight()-window.global.tabbarheight);
}
}
}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

ListItems.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
});

kalbster
12 Apr 2011, 10:25 AM
The afterrender trick helped me also.