Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Squeezebox</title>
<link rel="stylesheet" type="text/css" href="js/sencha-touch/resources/css/ext-touch.css" />
<script type="text/javascript" src="js/sencha-touch/ext-touch.js"> </script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
var store = new Ext.data.JsonStore({
model : 'Contact',
sorters: 'lastName',
getGroupString : function(record) {
return record.get('lastName')[0];
},
data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Search', lastName: '<input type="text" />'}
]
});
var list = new Ext.List({
tpl: '<tpl for="."><div class="contact">{firstName} <strong>{lastName}</strong></div></tpl>',
fullscreen : true,
itemSelector: 'div.contact',
singleSelect: true,
store: store,
hideOnMaskTap: false
});
list.show();
});
</script>
</head>
<body>
</body>
</html>
In some other (more complex) case it didn't move at all, leaving the input field hidden behind the keyboard