I am trying to take a picture using camera in Sencha Touch 2. Here i have one button 'Take a Picture', when i will press it, camera should start. As i am new to this sencha touch 2, i am unable to figure it out, how to do this?
For this i used the below code:
Sencha Fiddle Link
Please help me. I do not want to use Phone gap.
You have to add device folder of Sencha Library in root directory
and add below code in
Ext.require('Ext.device.Camera');
and use this code for capture image using camera
Ext.device.Camera.capture({
success: function(image) {
imageView.setSrc(image);
},
quality: 75,
width: 200,
height: 200,
destination: 'data'
});
If you want to use purely sencha, then you can check this code:
xtype: 'button',
handler: function(button, event) {
Ext.device.Camera.capture({
source: 'camera',
destination: 'data',
success: function(imagedata) {
var img = Ext.getCmp('theimage');
img.setSrc('data:image/jpeg;base64,' +imagedata);
},
failure: function() {
Ext.Msg.alert('Error', 'There was an error when acquiring the picture.');
},
scope: this
});
But if you want to use phonegap camera features, may be you have to change the code. As sencha is giving the default feature to handle the camera, i wish not to go with phonegap. Hope it will help..
Related
I have implemented my sencha architect project with a possibility to do a photo (with phonegap). After taking a photo, I need to see the photo directly into another container with other information (the picture will be smaller than the original...and there will be written above and below).
How do I open the new container and display the image in a smaller size?
please help me, I don't understand how can I manage the photo
Now I use this code but if you have something better....
var me = this;
Ext.device.Camera.capture({
success: function(image) {
me.add({
xtype:'image', // Commento
src: image
});
},
source: 'camera',
cameraDirection: navigator.camera.Direction.FRONT,
destination: 'file'bu
});
thank you
Carlo
Sencha documentation got an example for it. See http://docs.sencha.com/touch/2.3.1/#!/api/Ext.device.Camera
Ext.device.Camera.capture({
success: function(image) {
imageView.setSrc(image);
},
quality: 75,
width: 200,
height: 200,
destination: 'data'
});
You can also use
destination: 'url'
in that case the image argument of the callback function will be a file URL what you can use in a container template as the source of the html image.
We created a telephone directory Sencha touch mobile application for our company. We have a requirement to dial a employee by tapping the phone number in the employee details screen which should trigger dialing the phone. To achieve the same we used the code highlighted in green color which works in iOS and Andorid Icecream (Tested in older version of Samsung) but failing in Jellybean OS.
Can someone help us how to overcome this or what is the best way to make it work in all the devices.
Ext.Viewport.setActiveItem({ xtype: 'adminstaffdetailview', styleHtmlContent: true, html: adminStaffDetailsTemplate,
listeners: {
tap: function( tap, element ){
if(tap.delegatedTarget.id == 'rowPhoneTap'){
window.location = "wtai://wp/mc;[" + tap.delegatedTarget.innerText.trim() + "]";
}
},
element: 'element',
delegate: 'tr'
}});
Ext.Viewport.unmask();
}
Why not using a link with tel protocol instead of a window location to call ?
You need to set data to your tpl (phone_number)
Ext.Viewport.setActiveItem({
xtype: 'adminstaffdetailview',
styleHtmlContent: true,
tpl: ['call'], // your template adminStaffDetailsTemplate,
});
iam new sencha touch.
Iam doing one project , in that project i need to convert the images to base64 string, iam uploading the image, and iam getting fulll path of image, but iam unable to convert image to base64 string.
plz help me in this issue.
make sure that iam asking in sencha touch
How do you access the files? Where the images are coming from? If they are from the camera or the photo gallery then Phonegap is the best way to get them. Base64 encoding is solved by PG in that case. If you are trying to solve it in pure js then you need to do some more work on it. Sencha doesn't provide functions for base64 encoding. So the best bet if you add some function to your project. There are lots of resources on the web how to do base64 encoding in javascript. E.g. see the discussion here Base64 encoding and decoding in client-side Javascript
The following code snippet helps you for uploading image and get base64 data uri
In your view you should have the following filefield component of sencha touch
Ext.define('MyApp.view.Main', {
extend: 'Ext.form.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'filefield',
id: 'idfilefieldSample',
name: 'filefieldSample',
accept: 'image'
},
]
}
});
and your controller look like this:
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
config:{
control:{
'filefield[name=filefieldSample]': {
change: 'onChangefilefield',
},
}
},
onChangefilefield: function(filefield, newData, oldData, eOpts)
{
var filesSelected = Ext.getCmp('idfilefieldSample').getComponent().input.dom.files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var srcData = fileLoadedEvent.target.result;
console.log(srcData);
}
fileReader.readAsDataURL(fileToLoad);
}
},
});
Iam using sencha touch for building mobile application, Ia m using card layout switch in my tab panel. sometimes the card layout is not working properly. Please help me regarding this.
App.views.TabPanelView = Ext.extend(Ext.TabPanel, {
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'horizontal'
},
items: [item1, item2,item3,item4,item5]
}
}
First you should change horizantal to horizontal
simple Just Put cover: false in your cardSwitchAnimation. Hope it works
Edit: Upon further examination I discovered that I hadn't included certain namespaces. Adding the relevant name spaces now gives the error:
'myapp.mainpanel has no method setActiveItem'
I am trying to build a sencha touch web app using the card layout mechanism. I make use of the following handler on a button on the landing page:
handler:function(){
myapp.mainpanel.setActiveItem(myapp.cards.vehicleSearchResults, { type: 'slide', cover: false, direction: 'left'})
}
But when I click on the button I get the error: Sencha Touch error: 'myapp.mainpanel has no method setActiveItem'
Does this mean myapp.cards.vehicleSearchResults is undefined?
I define it here:
myapp.cards.vehicleSearchResults = new Ext.Panel({
scroll:false,
layout:{
type:"vbox",
align:"stretch"
},
id: "vehicle-search-results-card",
dockedItems: [myapp.toolbars.searchResultsTitle, myapp.toolbars.searchResultsNav, myapp.toolbars.searchResultsCaption]
})
Any clues as to what I am doing wrong based on the above code?
The setActiveItem() method is only available if the panel has a card layout. Make sure you add the 'card' layout property in your panel definition.