Saturday, February 26, 2011

Sencha Touch iPad Signature JavaScript

We'll be extending an Ext.Panel object from Sencha Touch to create an iPad signature pad. When you click submit it will tie in to the server-side PHP script in this post. It works pretty well, though there are many ways that it could be enhanced.

We are using the Sencha Touch MVC style approach outlined here:

Go ahead and try it out here (iPad/Safari/Chrome/Webkit only):


  1. For past five years I worked in java technology.Recently My boss assigned me to work with Sencha.I swear that it is a bit difficult to change but interesting too.I am trying to grasp your code.Thanks for sharing it
    electronic signature software

  2. Great post, cant wait to try it out

  3. I have no idea how to implement this. How do I make it look like that? Where's the rest of the code for the panel? The CSS?

    1. All the code is here if you want to see how it's done:

  4. Hi,

    How to save the image after signing?

  5. I dead consider joyous when I acquire articles pertinent to my process and my issue.
    ipad 32gb

  6. any idea on how to prevent scrolling of the page when drawing when the page goes beyond the fold?

  7. @TJassens, I'm not sure, in general you can try and call preventDefault() on the touchmove event and see if that helps. If that doesn't work, which it might not, you may want to try and make sure the signature is centered vertically or the only thing on the screen when they 're using it....let me know how you get it to work!

  8. For sure many people out that want to start creating their own iPad signature and it is a good source on how to make it.

    Limited iPad case products

  9. Nice blog and absolutely outstanding. You can do something much better but i still say this perfect.Keep trying for the best. Hire Sencha Touch Developer