how to get reference of cordova's plugins in Sencha Touch code

Question

I am about to add some plugins into my cordova project. But the cordova project is generated by Sencha Touch 2.

So if I added a plugin under cordova,

how to get reference of cordova's plugins in Sencha Touch code?(As Sencha Touch code is ONE level ABOVE cordova's plugin)

And I should not touch the generated cordova code as it will be replaced every time when I re-generate cordova project by using Sencha Touch CMD commands.

---

Update

I'd like to clarify my question by giving a scenario :

For example, I'd like to use camera in Sencha Touch code, but getting access of the native resources in a mobile phone is done by using Cordova plugins. And when running Sencha Touch command to generate Cordova project, all code under cordova folder will be overwritten, so cannot do the coding under cordova folder, that's why all coding must be done in Sencha Touch level.

Therefore, the problem becomes-> how can I get access to camera in sencha touch code if the plugin is under cordova's scope which means the access of cordova plugins are out of the scope of Sencha Touch.

To make it more clear, here is the structure of a Sencha Touch project which contains Cordova project:

Root folder for Sencha Touch Project
-app
-cordova
  -plugins
-...

so as you can see, plugins are under cordova folder so I don't know how to get a reference of the camera plugin like:

Ext.navigator.camera.function() (like this?)

in Sencha Touch code.

I hope my explanation makes sense to you.

Thank you.

Answer 1

Cordova plugins declare in their manifest (e.g. plugin.xml), using the clobbers element how the functionality is exposed inside the browser runtime. The target attribute value is the added to the window object and can be used right after deviceready event is fired.

More information about plugin.xml and clobbers can be found here.

Answer 2

I found the answer at https://github.com/CaliLuke/NativeContacts/blob/master/app/view/Picture.js

For the convenience, here is the code.

/*
 * File: app/view/Picture.js
 *
 * This file was generated by Sencha Architect version 2.0.0.
 * http://www.sencha.com/products/architect/
 *
 * This file requires use of the Sencha Touch 2.0.x library, under independent license.
 * License of Sencha Architect does not include license for Sencha Touch 2.0.x. For more
 * details see http://www.sencha.com/license or contact license@sencha.com.
 *
 * This file will be auto-generated each and everytime you save your project.
 *
 * Do NOT hand edit this file.
 */

Ext.define('Contact.view.Picture', {
    extend: 'Ext.Container',
    alias: 'widget.contactpic',

    config: {
        height: 120,
        minHeight: 100,
        style: 'overflow: hidden',
        ui: '',
        layout: {
            align: 'center',
            type: 'vbox'
        },
        overflow: 'hidden',
        tpl: [
            '<img src="{picture}" width="160" />'
        ],
        items: [
            {
                xtype: 'component',
                html: ''
            },
            {
                xtype: 'button',
                bottom: 5,
                itemId: 'mybutton',
                right: 5,
                iconCls: 'add',
                iconMask: true
            }
        ],
        listeners: [
            {
                fn: 'onMybuttonTap',
                event: 'tap',
                delegate: '#mybutton'
            }
        ]
    },

    onMybuttonTap: function(button, e, options) {
        Ext.device.Camera.capture({
            source: 'camera',
            destination: 'file',

            success: function(url) {
                this.fireEvent('change', this, url);
            },
            failure: function() {
                Ext.Msg.alert('Error', 'There was an error when acquiring the picture.');
            },
            scope: this
        });
    }

});