Sencha and Phonegap callback issue

Question

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();                                    
                            }
                        }
                    ]                                           
                }
            ]

Answer 1

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'
                        }
                    ]
                }
            ]
        }

Answer 2

have you tried:

listeners:[
    tap: function(e,t) {
        this.getImageData();
    }
]

I mean, the "image" already got "tap" event on its arsenal anyway..