PDA

View Full Version : [OPEN-491] 0.98 overflowed image cannot be scrolled any more.



Animal
31 Oct 2010, 2:08 AM
Scrolling has broken since 0.96.

Drop this into 0.96's examples directory. It loads a PDF which you can scroll:



<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;" />
<title>Scroller bug</title>
<link rel="stylesheet" href="../resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="../ext-touch.js"></script>
<script>
Ext.setup({
fullscreen: true,
onReady: function() {
new Ext.Panel({
fullscreen: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
title: "PDF can be scrolled"
}],
style: {
background: '#fff none' // Work round deliberate background BUG!
},
scroll: 'both',
items: [
new Ext.Component({
initComponent: function() {
this.constructor.prototype.initComponent.apply(this, arguments);
this.el = document.createElement('img');
this.el.src = 'http://news.bbc.co.uk/2/shared/bsp/hi/pdfs/08_03_10_BBC_internet_poll.pdf';
}
})
]
});
}
});</script>
</head>
<body></body>
</html>


Then drop this into 0.98's examples directory. It displays the same PDF which cannot be scrolled:



<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;" />
<title>Scroller bug</title>
<link rel="stylesheet" href="../resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="../ext-touch.js"></script>
<script>
Ext.setup({
fullscreen: true,
onReady: function() {
new Ext.Panel({
fullscreen: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
title: "PDF can't be scrolled!"
}],
style: {
background: '#fff none' // Work round deliberate background BUG!
},
scroll: 'both',
items: [
new Ext.Component({
initComponent: function() {
this.constructor.prototype.initComponent.apply(this, arguments);
this.el = document.createElement('img');
this.el.src = 'http://news.bbc.co.uk/2/shared/bsp/hi/pdfs/08_03_10_BBC_internet_poll.pdf';
}
})
]
});
}
});</script>
</head>
<body></body>
</html>

Steffen Hiller
31 Oct 2010, 8:33 AM
Wow, first time I see this.constructor.prototype for accessing one's superclass and wonder why this isn't the standard?

steve1964
1 Nov 2010, 6:19 AM
Hi Animal, this is working in 0.96 but you can scroll within the 1st page of the pdf not more...

Animal
1 Nov 2010, 6:24 AM
Yes, it works in 0.96.

I noticed yesterday when I gave the example with a multi-page document that it only showed the 1st page.

I have not found a way to show a multi-page document in Safari Mobile. I've tried <embed...> in all kinds of ways but it won't work.

<iframe> shows the document, but you cannot interact with it with touch gestures to scroll it, so that's no use.

steve1964
1 Nov 2010, 6:38 AM
This html is working on mobile safari, it display a multi-page pdf


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PDF</title>
</head>
<body>
<object data="test.pdf" type="application/pdf" width="100%" height="20000px"></object>
</body>
</html>

I've tried every sort of combination in Sencha Touch, but i can't get it working

Animal
1 Nov 2010, 7:17 AM
But you have to explicitly set its height correctly? How can you know what height?

And won't width="100%" scale it?

I want to use pinch gestures to rescale it. This works using an <img> tag.

steve1964
1 Nov 2010, 7:33 AM
Yes, if you set height 100% it display only 1st page and yes width 100% it scale it , but you can use pinch with mobile safari, it's working with the html example i have provided. I made this example only to prove that it's possible to view a multi-page pdf with mobile safari, the point is i have no idea to make it working with Sencha Touch, your solution is for know the best i've see (iframe solution with Sencha is not working not only for pdf), maybe someone of Sencha Team can give us the right direction.

Animal
1 Nov 2010, 7:54 AM
Hmm, thanks. I'll try this tonight.

Animal
4 Nov 2010, 2:28 AM
The document loads, but I just cannot set the <object>'s height and width to the full "natural" height/width of the PDF.

Setting it to 100% width means it's not scrollable left/right

Hardcoding a height is crazy.

I've been googling like mad but nobody knows anything. It must be possible to show a fully formed scrollable PDF!

Jacky Nguyen
8 Dec 2010, 2:01 PM
Your sample code works for me in 1.0.x. Can you confirm whether it's still an issue?