PDA

View Full Version : Problem with scroll to top in Ext.panel with input type="text". Is it a bug?



nishimura
4 Feb 2011, 1:55 AM
Hi.

I have a page with input tag (input type="text" or "password") and a toolbar by Ext.toolbar.
It works well, but when I see the page by iPad, there is a problem.

1) Tap the textfield, and the keyboard appears in the screen.
2) Tap the HTML body (not on the input form)

After 2nd process, the page was force to scroll down and the input form disappears from the screen!!

In my opinion, this situation is caused by "scrollToTop" method in Ext.Viewport class
especially "document.body.scrollTop = document.boy.scrollHeight" in the method.

Why does it cause?
Is it a bug in sencha touch?

This is a very simple example.



<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="resources/css/sencha-touch-debug.css" type="text/css">
<script type="text/javascript" src="sencha-touch-debug.js"></script>
<script language="JavaScript" type="text/javascript">
Ext.setup({
onReady: function() {
var mainBar = new Ext.Toolbar({
renderTo: 'toolbar',
ui: 'dark',
dock: 'top',
title: 'TOOLBAR'
});
}
});
</script>
</head>
<body>
<div id="toolbar"></div>
<form name="mailForm" action="./index.html" method="post">
<input name="mail" type="text" placeholder="address">
</form>
</body>
</html>


Help me please...
thank you.

nishimura
6 Feb 2011, 7:03 PM
I found the solution of the problem yesterday!
The problem was caused because of "Ext.currentlyFocusedField".
So I set Ext.currentlyFocusedField up as 'true' when input form was focused
and set it up as 'false' when input form was blurred.

<input name="mail" type="text" placeholder="address" onfocus="Ext.currentlyFocusedField=true;" onblur="Ext.currentlyFocusedField=false;">


Thank you.



[/CODE]