sencha-touch-2.2

Sencha and Phonegap callback issue


This is how i am creating an xtype. But this does not work at all, the getImageData is not being invoked at all. Can somebody shed some light on this?

items: [
                {
                    xtype: 'image',
                    flex: 9,
                    height: '100px',
                    itemId: 'imageFieldData',
                    width: '100px',
                    src:'resources/images/icon_camera.png',
                    getImageData : function()
                    {                           
                        if(Ext.browser.is.PhoneGap)
                        {
                            navigator.camera.getPicture(this.setImageData, function(message){console.log(message);}, { quality: 50 });
                        }
                    },
                    setImageData : function(imageData){
                        console.log("data:image/jpeg;base64," + imageData);
                        console.log(t);
                        console.log(this);
                        this.setSrc(imageData);                         
                    },
                    listeners:[
                         {
                            element: 'element',
                            event: 'tap',                               
                            fn: function(e,t) {                                 
                                this.getImageData();                                    
                            }
                        }
                    ]                                           
                }
            ]

Solution

  • I have modified the code a little bit to add more functionlity with buttons to take picture from the camera and also choose from the gallery. Here is the code and it works.

     {
                xtype: 'panel',
                height: '100px',
                width: '70%',
                layout: 'hbox',
                items: [
                    {
                        xtype: 'image',
                        flex: 1,
                        height: '100px',
                        itemId: 'imageFieldData',
                        id:'imageFieldData',
                        width: '100px',
                        margin:'5px',
                        src:'resources/images/icon_camera.png'                                                      
                    },
                    {
                        xtype: 'panel',
                        layout:'vbox',
                        flex:1,
                        items : [
                            {
                                xtype:'spacer'
                            },
                            {
                                xtype: "button",
                                text: "Choose From Gallery",
                                handler: function() {
                                    function success(image_uri) {
                                        var img = Ext.ComponentQuery.query("#imageFieldData")[0];
                                        img.setSrc(image_uri);
                                    }
    
                                    function fail(message) {
    
                                    }
    
                                    navigator.camera.getPicture(success, fail, 
                                        {
                                            quality: 50,
                                            destinationType: navigator.camera.DestinationType.FILE_URI,
                                            sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
                                        }
                                    );
                                }
                            },
                            {
                                xtype:'spacer'
                            },
                            {
                                xtype: "button",
                                text: "Take Picture",
                                handler: function() {
                                    function success(image_uri) {
                                        var img = Ext.ComponentQuery.query("#imageFieldData")[0];
                                        img.setSrc(image_uri);
                                    }
    
                                    function fail(message) {
    
                                    }
    
                                    navigator.camera.getPicture(success, fail, 
                                        {
                                            quality: 50,
                                            destinationType: navigator.camera.DestinationType.FILE_URI,
                                            sourceType : navigator.camera.PictureSourceType.CAMERA
                                        }
                                    );
                                }
                            },
                            {
                                xtype:'spacer'
                            }
                        ]
                    }
                ]
            }