SignaturePad plugin for the Sencha Touch 2

[Vitaly Ivanov]

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

[mitchellsimoens]

You should really optimize your code. You should only have 1 class per file.

[thejonz]

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?

thanks!

[Vitaly Ivanov]

Hey, I'm not working with Sencha Architect, so I can't help with this

[QuinnPerkins]

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)

http://sigtest.m3tr1cs.com/

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

Thanks!

[netlogic]

I was able to get it to run by going to app and modifying the requires statement

requires: [
'Ext.MessageBox',
//'Sencha.ux.SignaturePad'
'ST2.plugin.SignaturePad'
],

[bionicmaster]

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.

Greetings

[mikegriffin]

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
Ext.Loader.setConfig({
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',
config:{
plugins: [
{
xclass: 'ST2.plugin.SignaturePad',
canvasId: 'signature',
width: 500,
height: 230,
disableScrollCmp: 'formpanel'
}
]
},
initialize:function(){
Ext.create('ST2.plugin.SignaturePad');
this.callOverridden(arguments);
}

});

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

[mikegriffin]

This link has a working version and the Architect xds file

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