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:
http://www.slideshare.net/senchainc/structuring-your-sencha-touch-application
http://www.sencha.com/learn/Tutorial:A_Sencha_Touch_MVC_application_with_PhoneGap

Go ahead and try it out here (iPad/Safari/Chrome/Webkit only): http://www.jamund.com/signature

10 comments:

  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

    ReplyDelete
  2. Great post, cant wait to try it out

    ReplyDelete
  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?

    ReplyDelete
    Replies
    1. All the code is here if you want to see how it's done:
      http://www.jamund.com/signature/

      Delete
  4. Hi,

    How to save the image after signing?

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

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

    ReplyDelete
  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!

    ReplyDelete
  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

    ReplyDelete