View Full Version : SignaturePad plugin for the Sencha Touch 2

Vitaly Ivanov
17 Sep 2012, 6:09 AM
Hey guys, I have updated the existing signature pad plugin written for Sencha Touch 1.
You can find the source code here https://github.com/ivanovvitaly/SignaturePadST2 and the code for the sample form bellow as well.

Here is the sample image of what I've got

19 Sep 2012, 11:22 AM
You should really optimize your code. You should only have 1 class per file.

27 Sep 2012, 7:34 AM
I'm very extied to use this - thanks for making! Any tips on how to get this to work in Sencha Touch in Architect 2?


Vitaly Ivanov
5 Oct 2012, 3:40 AM
Hey, I'm not working with Sencha Architect, so I can't help with this :(

13 Oct 2012, 11:05 PM
Ok...should I have to do anything more to see the sample app from Git than put it in a directory up on a standard LAMP build and hit its index file?

I threw this up on a server, and get this error:

Error: The following classes are not declared even if their files have been loaded: 'Sencha.ux.SignaturePad'. Please check the source code of their corresponding files for possible typos: 'app/plugin/SignaturePad.js
[Break On This Error]

"corresponding files for possible typos: '" + missingPaths.join("', '"));

sencha-touch.js (line 7897)


Can anyone offer me any guidance on what I'm doing wrong?


14 Oct 2012, 8:48 PM
I was able to get it to run by going to app and modifying the requires statement

requires: [

16 Oct 2012, 11:56 AM
to use any ux plugin in sencha architect you can do this:

Create a loader in Application
Add in routes this:
{'Ext.ux.touch' : 'app/ux'}
or if you wanna be more specific:
{'Ext.ux.touch.Rating' : 'app/view/fieldRating.js'} //this uses starRating, renames and relocates in another place

and you can load this, but you can't edit in SA, you need external editor to edit anything inside the file, as an extra thing, don't forget to use require in the Class that is invoking it.


24 Oct 2012, 11:42 PM
Add SignaturePad.js to your project root.
Add in a JS Resource that points to this (note: this will then deploy with your project and let you edit in Architect)

Create a loader
enabled: true,
paths: {
'ST2.plugin.SignaturePad': 'SignaturePad.js'

Create a container in the form you want to use it.
Promote to Class
Create override in class

Ext.define('DiveLogger.view.override.MyContainer', {
override: 'DiveLogger.view.MyContainer',
plugins: [
xclass: 'ST2.plugin.SignaturePad',
canvasId: 'signature',
width: 500,
height: 230,
disableScrollCmp: 'formpanel'


Note: disableScrollCmp will be the parent xtype for your form.

25 Oct 2012, 12:40 AM
This link has a working version and the Architect xds file

http://www.onebiglink.com/autograph/ (http://www.onebiglink.com/autograph/)