Answered: Using Native Browser Zooming in an Android/iOS Sencha App
Answered: Using Native Browser Zooming in an Android/iOS Sencha App
Without Sencha (just PhoneGap) I’m able to use the viewport meta tag to create a graphics page with about 2,000 vector graphics that can be panned and zoomed and it is all beautifully handled by the underlying WebKit browser. Whenever I try to incorporate this idea into a Sencha app and use the Sencha native packager, Sencha disables the viewport scaling.
I’ve tried many things such as using JavaScript to modify the viewport and embedding the graphics page in an iframe and nothing seems to be working. I have even tried implementing the zooming and panning from scratch by processing the zoom and drag events and using a canvas and translation to clip the graphics, but this too slow in the mobile app (the speed is fine in the desktop version). I hope a Sencha Guru out there can help me find a solution—it would be a shame to have to abandon Sencha just because I cannot get this one aspect to work properly.
Thank you for the response, but the problem isn't really capturing the events, which isn't hard to do with Sencha. Instead, the issue is with how to actually make the graphics page zoom in and out in a responsive way, while still using the Sencha framework. I've tried:
1. CSS scaling in JavaScript using the webkitTransform property
2. Scaling using the canvas.scale() function
3. Recalculating the vertices of all the vectors, scaling them manually and then redrawing
All of these options are very responsive in a desktop browser, but none of them are quick enough on my native mobile device and I have a Samsung Galaxy S2, with a dual core, which should have more than enough power to do this quickly. On my phone, it takes about 1 second to scale using the methods above and unfortunately, this is too slow. (Please recall that I have about 3,000 vector graphics on my page, which means that the zooming must be very efficient). I consider this an issue with Sencha as without Sencha the browser's native scaling of the viewport works amazingly well. Surely there must be a way to utilize the browser's native viewport scaling within the Sencha framework, right?
I know I can do this with JQuery Mobile by "redirecting" my app to an "external" page and then utilizing the browser's native viewport scaling, but Sencha's UI is so much nicer so I'd love to stick with Sencha. Can you help me?
Maybe I am misunderstanding, but have you tried the pinch zoom carousel for sencha touch 2 that handles zooming?? I guess with the amount of graphics you are trying to display this will probably not work, but might be worth a look...
Answered: Using Native Browser Zooming in an Android/iOS Sencha App
Reply With Quote
