How to get a plugin to work in Architect

[thejonz]

I'm struggling trying to get a plug in to work using Sencha Touch Architect. Anyone have any good examples of how to do this? Ultimately I am trying to use the SignaturePad plugin (found here: http://www.sencha.com/forum/showthre...Sencha-Touch-2). It only has 3 files, a controller, a view and a .js file with the custom xtype.

Any help will be greatly appreciated!

thanks,

JP

[iplanit]

For ExtJS4.1 you have to add the resource and then use overrides.

Editing your Application requires and copying the "ux" code is also something you have to do (in Sencha Architect or in your own non-mvc code).

[loiane]

It works as any other component.

I personally use dynamic loading to load the plugin so I do not need to add it as resource (it does not look elegant).

I have an example here if you want to take a look and have an idea of how you can use it. It is ExtJS 4 but the same works for Sencha Touch 2.

https://github.com/loiane/sencha-ext...er/grid/paging

[thejonz]

Thanks iPlanit and Obrigado Loiane!

I'm looking forward to looking at your paging example!

[thejonz]

Loiane,

I see how you are using a custom xtype: 'pagingtoolbar' in your MyPagintToolbar view but how were you able to specify this custom type? I don't see xtype (nor type) as a property you can set using architect. If I edit my .js file directly in a text editor after the save I can get it to work but every time I save in architect I have to edit the .js file manually again. BTW - I'm using Sencha Touch and have no experience in Ext.

Obrigado!

[iplanit]

Loiane:

add a resource doesn't means "add a JS Resource", but it is also recommended by aconrad.

I preffer to edit the requires and add the files in the path of the application.

imho, an override to add filtering feature is even less elegant.

Regards

[loiane]

Loiane,

I see how you are using a custom xtype: 'pagingtoolbar' in your MyPagintToolbar view but how were you able to specify this custom type? I don't see xtype (nor type) as a property you can set using architect. If I edit my .js file directly in a text editor after the save I can get it to work but every time I save in architect I have to edit the .js file manually again. BTW - I'm using Sencha Touch and have no experience in Ext.

Obrigado!

PagingToolbar is a native ExtJS component. If you drag any component from the toolbox to an existing component, it will add it with its xtype. In the documentation (extjs 4 or sencha touch 2), you can see the xtype of any component

For more info: http://docs.sencha.com/touch/2-0/#!/api/Ext.Component

In the example I sent you, take a look at app.js and ForumThreadGrid.js to see how to handle the plugin.

[loiane]

Just one more comment: the plugin you are trying to use is not optimized. The author declared several classes into a single javascript file. If you want to use it with dynamic loading, it is not going to work as expected. You may want to organize it better a little bit.

[loiane]

Loiane:

add a resource doesn't means "add a JS Resource", but it is also recommended by aconrad.

I preffer to edit the requires and add the files in the path of the application.

imho, an override to add filtering feature is even less elegant.

Regards

sorry, I misunderstood you.
And I agree with what you've said.

[thejonz]

I really appreciate all your help! I've developed for many years but I'm very new to Sencha and JavaScript.

You're right, I can't get the plugin to work using dynamic loading - you said the file has multiple classes defined in it which isn't immediately obvious to me (again I'm new to JavaScript) but I trust you.

I am so close...

I got it working - kind of by doing the following...

I have an empty container view that I created an override for and I just added all the code in signaturefield.js to the override and it works IF I hand edit the view that is using the signature field. I have to hand edit the .js file and set the xtype='signaturefield' directly in a text editor after I save my Touch 2.0 project in Architect. But this is obviously a bad solution because every time I save in Architect the .js file is regenerated and my changes are lost so have to I update the .js file again and set the xtype='signaturefield' directly in a text editor.

Is there a way around this? I wish Architect would allow you change the xtype using a property in the UI.

thanks!!