PDA

View Full Version : [CLOSED] Ext.List with input field on iPhone using Previous/Next buttons



apurvjawle
1 Aug 2012, 3:11 PM
Sencha Touch version tested:

1.1 rev 1
Platform tested against:

iOS 5.0
iOS 5.1
Description:

ST is used with phonegap in hybrid mode.
A list with input fields in each row jumps when an input field is tapped.
When previous/Next buttons on the keyboard/numpad are used, the input field in focus goes out of the viewable area.
List auto scrolls sometimes when the Numpad is open/visible and when one tries to select/tap on a row
Test Case:



<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<title>Numbers</title>
<link rel="stylesheet" type="text/css" href="sencha/resources/css/sencha-touch.css" />
<script type="text/javascript" src="sencha/sencha-touch.js"> </script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.regModel('Numbers', {
fields: ['number']
});
var store = new Ext.data.Store({
model : 'Numbers',
data: [
{number: '01'},
{number: '02'},
{number: '03'},
{number: '04'},
{number: '05'},
{number: '06'},
{number: '07'},
{number: '08'},
{number: '09'},
{number: '10'},
{number: '11'},
{number: '12'},
{number: '13'},
{number: '14'},
{number: '15'},
{number: '16'},
{number: '17'},
{number: '18'},
{number: '19'},
{number: '20'},
{number: '21'},
{number: '22'},
{number: '23'},
{number: '24'},
{number: '25'},
]
});
var list = new Ext.List({
itemTpl: '<input type="tel" value="{number}"></input>',
fullscreen:true,
store: store,
});
list.show();
});
</script>
</head>
<body>
</body>
</html>






Steps to reproduce the problem:
Problem 1: List jump

Tap in the input field
Tap next 10 times
Once you are at number 10, the focus from 10 to 11 moves the input field out of the viewable area
From 11 to 12 the list comes back to the original position.
This keeps happening as one moves down or up in the list
The list keeps jumping as previous or next is clicked
Problem 2: Input field out of viewable area

Scroll to the bottom of the list
Select the last entry, i.e. 25
Tap previous multiple times
List Scrolls till #15 and then the focus goes to the field which is out of viewable area
Problem 3: Auto scrolling (Not consistently reproducible)

Follow steps in Problem 2
Once the focused field is out of viewable area tap anywhere in the list
The list will jump to the original scroller offset, i.e scrolled all the way to the bottom of the list and then start auto scrolling to the top (scrolling is not consistent though, but the list jumps every time)


The result that was expected:

The input field in focus should remain in the viewable area
The result that occurs instead:

Explained above