I have a toolbar button which when clicked should update my map to my current location. I am unable to find a working example of this functionality and hoping someone can advise me. Please see below for sample code - thanks for your help
Map:
Ext.define('MyApp.view.Myap', {
extend: 'Ext.Map',
alias: 'widget.mymap',
config: {
useCurrentLocation: false,
mapOptions:{
zoom: 9,
center: new google.maps.LatLng(42.2, -72.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
listeners: {
maprender : function(comp, map){
google.maps.event.addListenerOnce(map, "idle", function () {
var host = window.location.origin ? window.location.origin : window.location.protocol + "/" + window.location.host;
var kmlOptions = {preserveViewport: false}
var now = +new Date();
var layer = new google.maps.KmlLayer(host + '/path/to.kml?timestamp=' + now, kmlOptions);
layer.setMap(map);
return layer;
});
},
}
},
})
Toolbar Button:
Ext.define('MyApp.view.btnLocateMe', {
extend: 'Ext.Button',
alias: 'widget.btnlocateme',
config: {
ui: 'normal',
iconCls: 'locate',
iconMask: true,
text: 'Locate Me',
listeners: [
{
fn: 'onButtonTap',
event: 'tap'
}
]
},
onButtonTap: function(button, e, options) {
//Produces error: cannot call method of undefined
currentLocation: new google.maps.LatLng(this._geo.getLatitude(), this._geo.getLongitude());
MyApp.view.MyMap.map.setCenter(currentLocation);
}
});
my two cents contribution, try this
1) in MyApp.view.Myap substitute
useCurrentLocation: false,
by
useCurrentLocation : {
autoUpdate : false
},
Also you should declare currentLocation as a variable (I presume)
var currentLocation = ...
This should works. I've use a similar logic as yours in onButtonTap but inside a controller with no problems
Best regards
I have one suggestion.
Try changing current location to
new google.maps.LatLng( this.geo.getLatitude(),this.geo.getLongitude() ) ;
I think you can gather more info from this question in here.
The simplest way - switch to the another map view with option useCurrentLocation: true set in the config
Related
I'm trying to use the Rally 2.1 SDK to set a custom data field (c_wsjf) in a grid. I have a custom drop down list that I want to check the value of (c_TimeCrticalitySizing).
I created c_TimeCrticalitySizing as a feature card field in my Rally workspace with different string values (such as "No decay"). Every drop down list value will set the custom field to a different integer. When I try to run the app in Rally I get this error:
"Uncaught TypeError: Cannot read property 'isModel' of undefined(…)"
I'm thinking the drop down list value may not be a string.
How would I check what the type of the drop down list value is?
How could I rewrite this code to correctly check the value of the drop down list so I can set my custom field to different integers?
Here's my code block for the complete app. I'm still trying to hook up a search bar so for now I directly call _onDataLoaded() from the launch() function.
// START OF APP CODE
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
featureStore: undefined,
featureGrid: undefined,
items: [ // pre-define the general layout of the app; the skeleton (ie. header, content, footer)
{
xtype: 'container', // this container lets us control the layout of the pulldowns; they'll be added below
itemId: 'widget-container',
layout: {
type: 'hbox', // 'horizontal' layout
align: 'stretch'
}
}
],
// Entry point of the app
launch: function() {
var me = this;
me._onDataLoaded();
},
_loadSearchBar: function() {
console.log('in loadsearchbar');
var me = this;
var searchComboBox = Ext.create('Rally.ui.combobox.SearchComboBox', {
itemId: 'search-combobox',
storeConfig: {
model: 'PortfolioItem/Feature'
},
listeners: {
ready: me._onDataLoaded,
select: me._onDataLoaded,
scope: me
}
});
// using 'me' here would add the combo box to the app, not the widget container
this.down('#widget-container').add(searchComboBox); // add the search field to the widget container <this>
},
// If adding more filters to the grid later, add them here
_getFilters: function(searchValue){
var searchFilter = Ext.create('Rally.data.wsapi.Filter', {
property: 'Search',
operation: '=',
value: searchValue
});
return searchFilter;
},
// Sets values once data from store is retrieved
_onDataLoaded: function() {
console.log('in ondataloaded');
var me = this;
// look up what the user input was from the search box
console.log("combobox: ", this.down('#search-combobox'));
//var typedSearch = this.down('#search-combobox').getRecord().get('_ref');
// search filter to apply
//var myFilters = this._getFilters(typedSearch);
// if the store exists, load new data
if (me.featureStore) {
//me.featureStore.setFilter(myFilters);
me.featureStore.load();
}
// if not, create it
else {
me.featureStore = Ext.create('Rally.data.wsapi.Store', {
model: 'PortfolioItem/Feature',
autoLoad: true,
listeners: {
load: me._createGrid,
scope: me
},
fetch: ['FormattedID', 'Name', 'TimeCriticality',
'RROEValue', 'UserBusinessValue', 'JobSize', 'c_TimeCriticalitySizing']
});
}
},
// create a grid with a custom store
_createGrid: function(store, data){
var me = this;
var records = _.map(data, function(record) {
//Calculations, etc.
console.log(record.get('c_TimeCriticalitySizing'));
var timecritsize = record.get('c_TimeCriticalitySizing');
//console.log(typeof timecritsize);
var mystr = "No decay";
var jobsize = record.get('JobSize');
var rroe = record.get('RROEValue');
var userval = record.get('UserBusinessValue');
var timecrit = record.get('TimeCriticality');
// Check that demoniator is not 0
if ( record.get('JobSize') > 0){
if (timecritsize === mystr){
var priorityScore = (timecrit + userval + rroe) / jobsize;
return Ext.apply({
c_wsjf: Math.round(priorityScore * 10) / 10
}, record.getData());
}
}
else{
return Ext.apply({
c_wsjf: 0
}, record.getData());
}
});
// Add the grid
me.add({
xtype: 'rallygrid',
showPagingToolbar: true,
showRowActionsColumn: true,
enableEditing: true,
store: Ext.create('Rally.data.custom.Store', {
data: records
}),
// Configure each column
columnCfgs: [
{
xtype: 'templatecolumn',
text: 'ID',
dataIndex: 'FormattedID',
width: 100,
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'WSJF Score',
dataIndex: 'c_wsjf',
width: 150
},
{
text: 'Name',
dataIndex: 'Name',
flex: 1,
width: 100
}
]
});
}
});
// END OF APP CODE
The app works great until I add the if (timecritsize === mystr) conditional.
I also use console.log() to check that I've set all values for timecritsize to "No decay"
I would like to re-initialize my map view after a certain action performed in the controller.
This is my mapview:
Ext.define("App.view.MapView", {
extend: 'Ext.Container',
requires: [
'Ext.device.Geolocation',
'Ext.MessageBox'
],
xtype: 'mapview',
constructor: function () {
this.callParent(arguments);
this.element.setVisibilityMode(Ext.Element.OFFSETS);
this.on('painted', this.renderMap, this);
},
renderMap: function(){
var me = this,
lat = localStorage.getItem('latitude'),
lng = localStorage.getItem('longitude'),
geo = [lat, lng];
var map = L.map('map', {
center: geo,
zoom: 13
});
var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var marker = L.marker(geo, {
draggable: true,
title: 'Your position'
}).addTo(map);
}
});
How do I get and reset(re-initialize) my map view? I tried to make a reference to the mapview in the controller:
config: {
refs: {
mapCmp: 'mapview',
},
And then called it like this:
this.getApplication().getMapCmp.reset();
But it didn't work - I got 'function is undefined'. Basically I need it to initialize again like when the app starts up.
Please advise.
You get function is undefined message because the reset() function is not defined in your view.
However, if you want to initialize the MapView, you need to use the initialize() function. Add it in your file:
Ext.define("App.view.MapView", {
extend: 'Ext.Container',
requires: [
'Ext.device.Geolocation',
'Ext.MessageBox'
],
xtype: 'mapview',
constructor: function () {
this.callParent(arguments);
this.element.setVisibilityMode(Ext.Element.OFFSETS);
this.on('painted', this.renderMap, this);
},
initialize: function() {
// This function is launched each time the application starts up
}
renderMap: function(){
var me = this,
lat = localStorage.getItem('latitude'),
lng = localStorage.getItem('longitude'),
geo = [lat, lng];
var map = L.map('map', {
center: geo,
zoom: 13
});
var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var marker = L.marker(geo, {
draggable: true,
title: 'Your position'
}).addTo(map);
},
});
I am trying to change value of variable and i did as instruction in this post but value does not changes.
My codes are as follow:
Ext.define('MyApp.view.OnlineOffline', {
extend: 'Ext.Panel',
alias: "widget.onlineoffline",
config: {
onlineStatus: 0,
items: [
{
xtype: 'container',
layout: 'hbox',
cls: 'offline-wrap',
items:[
{
xtype: 'image',
cls: 'offlineCheck',
id:'onlineButton',
width: 85,
height:20,
listeners: {
tap: function (button)
{
var me = button.up('onlineoffline')
if (!Ext.device.Connection.isOnline())
{
Ext.Msg.alert('Please connect to <br/>working internet Connection?');
this.element.removeCls('onlineCheck');
this.element.addCls('offlineCheck');
me.setonlineStatus(1);
}
else {
if(me.getOnlineStatus())
{
console.log( 'connection yes if' + me.getOnlineStatus());
me.setOnlineStatus(1);
this.element.removeCls('onlineCheck');
this.element.addCls('offlineCheck');
}
else{
this.element.removeCls('offlineCheck');
this.element.addCls('onlineCheck');
me.setOnlineStatus(0);
console.log( 'connection yes else' + me.getOnlineStatus());
}
}
}
}
},
]
}]
}
});
A couple things here...
First, you are initializing me as a global variable, which is a bad idea. Rather than doing this, get a reference to what you have as me using the button:
listeners: {
tap: function (button) {
var me = button.up('onlineoffline')
...
The problem you are having is caused because you're calling the wrong function. Your config parameter is defined as onlineStatus, but you are calling setonlinestatus(). Call me.setOnlineStatus() instead. The camel-casing for the generated getters and setters will be done exactly as your config param, except the first letter will be capitalized.
this is the code i use to call the form view:
get_view_form_dimension: function() {
var self = this;
var action_manager = new openerp.web.ActionManager(this);
var dialog = new openerp.web.Dialog(this, {
width: 800,
buttons : [
{text: _t("Cancel"), click: function() { $(this).dialog('destroy'); }},
{text: _t("Save"), click: function() {
var form_view = action_manager.inner_viewmanager.views.form.controller;
form_view.do_save(function() {
$.jstree._reference("#new_tree").destroy();
self.get_tree_structure();
});
$(this).dialog('destroy');
}}
]
}).open();
action_manager.appendTo(dialog.$element);
action_manager.do_action({
res_model : 'df.bi.dimension',
res_id: self.process_id,
views : [[false, 'form']],
type : 'ir.actions.act_window',
flags : {
search_view: false,
sidebar : false,
views_switcher : false,
action_buttons : false,
pager: false
}
});
},
how can i set values into the form that this method will rise ?? or in case that exist other solution please tell me ? sorry for my english!
Add a context field to your do_action call with default values, like this:
context: {'default_account_id': 5, 'default_name': 'hello'},
I have followed the tutorial : http://miamicoder.com/2011/writing-a-sencha-touch-application-part-3/
to add and save notes. But save note is not working for me. What is the issue??
My code to save :
NotesApp.views.noteEditorTopToolbar = new Ext.Toolbar({
title: 'Edit Note',
items: [
{ xtype: 'spacer' },
{
text: 'Save',
ui: 'action',
handler: function () {
// TODO: Save current note.
var noteEditor = NotesApp.views.noteEditor;
var currentNote = noteEditor.getRecord();
// Update the note with the values in the form fields.
noteEditor.updateRecord(currentNote);
//var errors = currentNote.validate();
/*if (!errors.isValid()) {
currentNote.reject();
Ext.Msg.alert('Wait!', errors.getByField('title')[0].message, Ext.emptyFn);
return;
}*/
var notesList = NotesApp.views.notesList;
var notesStore = notesList.getStore();
if (notesStore.findRecord('id', currentNote.data.id) === null) {
alert('fjghjkh');
notesStore.add(currentNote);
} else {
alert('fjghjkh');
currentNote.setDirty();
}
notesStore.sync();
notesStore.sort([{ property: 'date', direction: 'DESC'}]);
notesList.refresh();
NotesApp.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
thanks
Sneha
I had the same problem. In my case, the solutaion was to add the config 'autoLoad: true' to my defined store.
Perhaps this answer helps other, who find this question by googling a similar problem.
Regards,
Andreas