I have a sample sencha touch application trying to implement E-Mail, Call and SMS functionality, but when run the application it's not opening E-Mail window or Call window. Please can I know the right syntax to make it work?
Sample code:
Ext.define('Sample.view.ContactsView', {
extend:'Ext.Panel',
requires:[
'Ext.form.FieldSet',
'Ext.field.Text'
],
alias:"widget.contactpage",
initialize:function () {
this.callParent(arguments);
},
config:{
items:[
{
xtype:'titlebar',
title:'Contact Us'
},
{
xtype:'panel',
layout:'hbox',
items:[
{
xtype:'button',
flex:1,
id:'smsButton',
handler:function(){
document.location.href = 'sms:464646'
}
},
{
xtype:'spacer'
},
{
xtype:'button',
text: 'Phone',
id:'callMeButton',
flex:1,
handler:function(){
document.location.href = 'tel:+1-800-555-1234'
}
}
]
},
{
xtype:'button',
text:'Email',
id: 'emailButton',
handler:function(){
document.location.href = 'mailto:webmaster#example.com'
}
}
]
},
});
Use window.open() method.
window.open('tel:+1-800-555-1234');
window.open('mailto:webmaster#example.com');
You can do this by just using the <a> tag
For phone number
+1-800-555-1234
For E-Mail
webmaster#example.com
Tapping on the link will automatically summon the phone app or e-mail app in both android and iOS.
Related
Has anyone ever tried to insert another chart with completely different data to the tooltip which is popping up when hovering over data points?
I have checked the possibilty to pass html to the formatter, but not sure how dynamically this is working.
I have a bubble chart and it would be perfect to add small line charts to the tooltips of the bubbles.
Yes, it is possible.
If you set tooltip's useHTML to true and create a chart in it, then you will get a chart in a tooltip.
Example: http://jsfiddle.net/n9z7r5uj/
$(function() {
$('#container').highcharts({
series: [{
type: 'bubble',
data: [[1,2,3],[4,1,6],[2,3,9]]
}],
tooltip: {
useHTML: true,
pointFormatter: function() {
var data = [this.x, this.y, this.z];
setTimeout(function() {
$('#chart').highcharts({
title: {
text: ''
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
animation: false,
data: data
}],
yAxis: {
title: ''
},
xAxis: {
categories: ['x','y','z']
}
});
}, 0);
return '<div id="chart" style="width: 100px; height: 150px;"></div>';
}
}
});
});
I have a JSON response that is nested like the following (simplified, but same format):
{
"response":{
"v":"1.0",
"users":[
{
"firstName":"Nicole",
"LastName":"A",
},
{
"firstName":"John",
"LastName":"B",
},
{
"firstName":"Bob",
"LastName":"C",
}
],
}
}
Here is the model:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'firstName'
},
{
name: 'lastName'
}
]
}
});
I am starting from the sencha architect tutorial for CityBars, so most of the code should be quite basic, and I am just trying to get the users from the json response loaded. Here is the controller:
Ext.define('MyApp.controller.User', {
extend: 'Ext.app.Controller',
launch: function() {
var me = this;
Ext.Viewport.setMasked({ message: 'Loading Attendees...' });
me.getUsers(function (store) {
me.getDataList().setStore(store);
});
},
getUsers: function(callback) {
var store = Ext.data.StoreManager.lookup('UserStore'),
url = 'http://urltogetjsonresponse'
store.getProxy().setUrl(url);
store.load(function() {
callback(store);
});
},
});
Here is the store:
Ext.define('MyApp.store.UserStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.User',
'Ext.data.proxy.JsonP',
'Ext.data.reader.Json'
],
config: {
model: 'MyApp.model.User',
storeId: 'UserStore',
proxy: {
type: 'jsonp',
reader: {
type: 'json',
rootProperty: 'response.user'
}
}
}
});
I tried 'response.user' but it did not work for me. I have already looked all over and know that using rootProperty: 'user' would work, if the users attribute were at the same level as "response" instead of nested under it. I have also tried adding record: 'users' but that did not seem to work either.
If anybody knows if this is doable and has an easy solution to this, that would be great. I don't actually understand how the proxy works, so if anybody can explain a bit about that, it would be helpful too. Thanks.
Taken from Sencha's documentation about the JSON reader :
{
"count": 1,
"ok": true,
"msg": "Users found",
"users": [{
"userId": 123,
"name": "Ed Spencer",
"email": "ed#sencha.com"
}],
"metaData": {
"idProperty": 'userId',
"rootProperty": "users",
"totalProperty": 'count',
"successProperty": 'ok',
"messageProperty": 'msg'
}
}
The rootProperty here is 'users', so you'll need to specify users (which is the name of the array containing your instances of model) and not user .
I have a Kendo UI grid with a popup editable property. I would like to make my dropdown columns wider when I'm add/edit mode, but I cannot seem to change the widths. I can indeed change the widths in the grid itself but not in edit mode.
Does it have to do with some kind of Edit Template ? I can't find the documentation for it.
thanks.
Bob
Here's my sample grid :
positGrid = $("#positGrid").kendoGrid({
dataSource: datasource,
toolbar: [
{ name: "create", text: "Add Position" }
],
columns: [{
field: "PositionId",
},
{
field: "Portfolio",
editor: portfolioDropDownEditor, template: "#=Portfolio#"
},
{
field: "Instrument",
width: "220px",
editor: instrumentsDropDownEditor, template: "#=Instrument#",
},
{
field: "NumOfContracts",
},
{
field: "BuySell",
editor: buySellDropDownEditor, template: "#=BuySell#"
},
{
command: [
{
name: "edit",
click: function (e) {
}
},
"destroy"
]
},
],
sortable: true,
editable: "popup",
});
You can wire up edit event to set dropdown options:
name: "edit",
click: function (e) {
if (!e.model.isNew()) {
var dropdown = e.container.find("input[name=Portfolio]").data("kendoDropDownList");
dropdown.list.width(500);
}
}
I'm trying to create an MVC "Notes" application using Sencha touch 2 on aptana studio 3, I've only created the main view and a controller, but when I test it using chrome, all it shows is a blank white screen.
Any help?
Here's my code:
Main View:
Ext.define("NotesApp.view.NotesListContainer", {
extend: "Ext.Container",
config: {
fullscreen:true,
items: [{
xtype: "toolbar",
docked: "top",
title: "My Notes",
items: [{
xtype: "spacer"
}, {
xtype: "button",
text: "New",
ui: "action",
id: "new-note-btn"
}]
}]
}
});
controller:Notes.js:
Ext.define('NotesApp.app.controller.Notes',{
extend:'Ext.app.Controller',
config:{
refs:
{
newNoteBtn:'#new-note-btn'
},
control:
{
newNoteBtn: {
tap: 'onNewNote'
}
}
},
onNewNote:function()
{
console.log("onNewNote fn");
}
});
app.js:
Ext.application({
name: "NotesApp",
controllers: ["Notes"],
views: ["NotesListContainer"],
launch: function () {
console.log("fff");
//debugger;
var notesListContainer = Ext.create("NotesApp.view.NotesListContainer");
Ext.Viewport.add(notesListContainer);
}
});
Recently there have been some issues with Chrome (version 43) causing white screens on chrome and android. You can try to override Ext.util.PaintMonitor to return a new instance of Ext.util.PaintMonitor.CssAnimation as specified here.
Not sure, but if you define
Ext.define("NotesApp.view.NotesListContainer", {
extend: "Ext.Panel",
you have to OK. If not post here your index.html
Cheer, Oleg
H, please only you change into Ext.Application
views: ["NotesListContainer"],
to,
requires: ['NotesApp.view.NotesListContainer'],
Hope these helps. :)
Im having trouble with what should be a simple thing to do but cant get it to work. I have tried several examples from different sites and looked and the Sencha Touch API but no luck. What I am trying is to just fill a List from an external JSON source. To make it as simple as possible I've just put it in an external file for now.
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
var store = new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',
getGroupString : function(record) {
return record.get('firstName')[0];
},
proxy: {
type: 'ajax',
url : 'test.json',
reader: {
type: 'json'
}
}
});
var list = new Ext.List({
fullscreen: true,
itemTpl : '{firstName} {lastName}',
store: store
});
list.show();}});
The JSON file
[
{
"firstName" : "pelle",
"lastName": "ollesson"
},
{
"firstName" : "nisse",
"lastName": "pellssdfok"
}
]
Is there something that you can see right away that is wrong?
Thanks in advance
Ok, solved. When I removed sorters and getGroupString it suddenly worked.