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,
});
Related
I'm trying to use .setActiveItem to display detailed info on items in a listview (Ext.dataview.List) in a Sencha 2.1 MVC app. The problem is that I can't get the detailed view to load the data.
I've tried many different methods of getting the detailed view to show data including setData, setRecord and Update (see below for some of my latest tries).
Most of the results I keep getting when searching the forums, stackoverflow and google are for sencha apps not using the MVC model.
(Oh, using .push this works fine but due to other reasons I'm moving away from the navigation view).
From my controller:
showDetail: function(list, record) {
/*this.getMain().push({
xtype: 'labdetail',
title: record.fullName(),
data: record.getData()
});*/
//The code above works, but only as long as I stay with navigation view...
console.log("showDetail");
//Ext.getCmp('labdetail').update(record.data);
//LabDetail.update(record.data);
//Ext.fly('labdetail').setData(record.data);
//Ext.getCmp('labdetail').setData(record.data);
//Ext.component('Labblistan.view.LabDetail').destroy();
//Ext.getCmp('Labblistan.view.LabDetail').destroy();
//Ext.fly('labdetail').destroy();
//var DetailView = Ext.create('Labblistan.view.LabDetail'); //If I create the view the console complains I need to destroy previous views with the same ID, hence the different destroy() approaches above
//DetailView.setRecord(record);
Ext.getCmp('mainpanel').setActiveItem('labdetail'); //This navigates to the right view, but it's empty
},
My detailview:
Ext.define('Labblistan.view.LabDetail', {
extend: 'Ext.Panel',
xtype: 'labdetail',
id: 'labdetail',
config: {
title: '{Analysis}',
styleHtmlContent: true,
scrollable: 'vertical',
fullscreen: true,
tpl: [
'<div style=position:absolute;top:50px;><p>Info about {Analysis}</p><p>{Comment}</p></div>'
],
},
});
Don't know if this is best practice but this is how I got it working:
Ext.getCmp('mainpanel').setActiveItem({
xtype: 'labdetail',
title: 'Detaljinformation',
data: record.getData()
});
i try to add a button in a navigationBar of a navigationView with possibility to push a new view when i tap the button. I need help because i don't understand how i can do that. My button is ok and i can log tap action in my console but i can't push a new view. I need to have a view which is docked to my tabbar...
What i want in fact is proposing to user the possibility to change the view : with the button he could switch views : navigation / list to carousel (with same datas from a store). All is ok with navigationview and my list of results but i can't add the carousel view possibility by tapping the button...
My first question would be, is it possible ? If yes then how can i do that ?
My code :
Ext.define("MyApp.view.Annuaire", {
extend: 'Ext.navigation.View',
xtype: 'annuairepanel',
requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store'
],
config: {
/*IMPORTANT : évite une erreur de clsReplace...*/
autoDestroy: false,
title: 'Annuaire',
iconCls: 'address_book',
defaultBackButtonText: 'Retour',
navigationBar: {
items: [
{
xtype: 'button',
id: 'carousel-annuaire',
iconCls: 'more',
iconMask: true,
align: 'right',
listeners: {
'tap': function() {
console.log('tap !');
}
}
}
]
},
items: [
{
xtype: 'list',
id: 'liste-annuaire',
cls: 'x-liste-annuaire',
itemTpl: [
'<div class="vignette-liste" style="background-image:url({_ann_www_pub});"></div>',
'<div class="titre-liste">{post_title}</div>',
'<div class="categories-liste">{categories}</div>'
].join(''),
title: 'Annuaire',
grouped:true,
indexBar:true,
store: 'Annuaires',
}
]
}});
Thanks for your help
Ben
Do you not confusing why NavigationView is used for? The use case for it is create a stacked pool of Panels (Ext.Panel and/or Ext.form.Panel) and do navi.push(view)/navi.pop() to easy navigating in eg. Master-Detail relation.
First it is not intended to add a List as a direct child of the Navi View.
Also the good practice is using of the Sencha MVC Controllers. I'm advising you to start with reading basic concepts in Sencha doc page:
http://docs.sencha.com/touch/2-0/#!/guide/controllers , http://docs.sencha.com/touch/2-0/#!/guide/views and other guides.
I do not say there are perfect Getting Start sources but there is something.
If you want to get more close look at Sencha buy a commercial book.
Tip, never buy Jesus Garcia's books
I'd prefer issues from Packt Publishers.
Cheers, Oleg
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..
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.