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