1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    California
    Posts
    29
    Vote Rating
    1
    thejonz is on a distinguished road

      0  

    Default How to get a plugin to work in Architect

    How to get a plugin to work in Architect


    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

  2. #2
    Sencha User
    Join Date
    Aug 2012
    Location
    Dublin
    Posts
    72
    Vote Rating
    11
    iplanit will become famous soon enough

      0  

    Default


    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).

  3. #3
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    181
    Vote Rating
    52
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      0  

    Default


    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
    Sencha/Java evangelist
    Author of ExtJS 4 First Look and Mastering Ext JS books
    English blog: http://loianegroner.com
    Portuguese blog: http://loiane.com
    Sencha Examples: https://github.com/loiane

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    California
    Posts
    29
    Vote Rating
    1
    thejonz is on a distinguished road

      0  

    Default Obrigado!

    Obrigado!


    Thanks iPlanit and Obrigado Loiane!

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

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    California
    Posts
    29
    Vote Rating
    1
    thejonz is on a distinguished road

      0  

    Default custom xtype

    custom xtype


    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!

  6. #6
    Sencha User
    Join Date
    Aug 2012
    Location
    Dublin
    Posts
    72
    Vote Rating
    11
    iplanit will become famous soon enough

      0  

    Default


    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

  7. #7
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    181
    Vote Rating
    52
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      0  

    Default


    Quote Originally Posted by thejonz View Post
    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

    I
    n the example I sent you, take a look at app.js and ForumThreadGrid.js to see how to handle the plugin.
    Sencha/Java evangelist
    Author of ExtJS 4 First Look and Mastering Ext JS books
    English blog: http://loianegroner.com
    Portuguese blog: http://loiane.com
    Sencha Examples: https://github.com/loiane

  8. #8
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    181
    Vote Rating
    52
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      0  

    Default


    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.
    Sencha/Java evangelist
    Author of ExtJS 4 First Look and Mastering Ext JS books
    English blog: http://loianegroner.com
    Portuguese blog: http://loiane.com
    Sencha Examples: https://github.com/loiane

  9. #9
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    181
    Vote Rating
    52
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      0  

    Default


    Quote Originally Posted by iplanit View Post
    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.
    Sencha/Java evangelist
    Author of ExtJS 4 First Look and Mastering Ext JS books
    English blog: http://loianegroner.com
    Portuguese blog: http://loiane.com
    Sencha Examples: https://github.com/loiane

  10. #10
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    California
    Posts
    29
    Vote Rating
    1
    thejonz is on a distinguished road

      0  

    Default So close

    So close


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