I'm quite new to sencha touch. The goal is to create an app which has a TabPanel containing four Tabs, one of them should be a map (the others are a NestedList and two Panels working like a charm). I've tried to make the map card like
NPApp.views.Mapcard = Ext.extend(Ext.Map, { ...
where I ended up with getting really strange results like some views are overlapping and no map is shown.
The second try was to creating a Panel, embed it into the TabPanel and add a map to the panel, where I get this error:
Uncaught TypeError: Cannot read property 'ROADMAP' of undefined;
sencha-touch-debug.js:24840
I've already tried to change the mapType to google.map.MapTypeID like mentioned in the Google Map API V3, no success there.
I just can't get the hang on it, hope you can give me some hints!
The App:
NPApp = new Ext.Application({
name: "NPApp",
title: "NextPuff",
icon: 'images/icon.png',
tabletStartupScreen: 'images/index_default.jpg',
phoneStartupScreen: 'images/index_default.jpg',
launch: function() {
this.views.viewport = new this.views.Viewport();
this.views.homecard = this.views.viewport.getComponent('navi');
}
});
The Viewport:
NPApp.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
store: NPApp.npstore,
initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'homecard', stretch: true},
{ xtype: 'searchcard', id: 'navi' },
{ xtype: 'mapcard' },
{ xtype: 'morecard' }
]
});
NPApp.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
The Mapcard:
NPApp.views.Mapcard = Ext.extend(Ext.Panel, {
title: "Map",
iconCls: "map",
initComponent: function() {
var npMap = new Ext.Map({
title: 'Map',
useCurrentLocation: true,
listeners: {
centerchange : function(comp, map){
// refreshMap(map);
}
},
mapOptions : {
mapTypeControl : false,
navigationControl : false,
streetViewControl : false,
backgroundColor: 'transparent',
disableDoubleClickZoom: true,
zoom: 17,
draggable: false,
keyboardShortcuts: false,
scrollwheel: false
}
});
Ext.apply(this, {
defaults: {
styleHtmlContent: true
},
items: [npMap]
});
NPApp.views.Homecard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('mapcard', NPApp.views.Mapcard);
Sencha 1.1.0; Google JavaScript Maps API V3; Safari 5.1
I have a similar application running. Your tabpanel is perfect. All you need to alter is your map code.... Try this instead :
var map = new Ext.Map({
mapOptions : {
center : center,
zoom : 20,
mapTypeId : google.maps.MapTypeId.HYBRID,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
listeners : {
maprender : function(comp, map){
var marker = new google.maps.Marker({
position: center,
//title : 'Sencha HQ',
map: map
});
setTimeout( function(){map.panTo (center);} , 1000);
}
},
geo:new Ext.util.GeoLocation({
autoUpdate:true,
maximumAge: 0,
timeout:2000,
listeners:{
locationupdate: function(geo) {
center = new google.maps.LatLng(geo.latitude, geo.longitude);
if (map.rendered)
map.update(center)
else
map.on('activate', map.onUpdate, map, {single: true, data: center});
},
locationerror: function ( geo,
bTimeout,
bPermissionDenied,
bLocationUnavailable,
message) {
if(bLocationUnavailable){
alert('Your Current Location is Unavailable on this device');
}
else{
alert('Error occurred.');
}
}
}
})
});
This creates the map object and sets the center to ur current location. Now you need to dock this object inside an Ext.extend(Ext.Panel({}) object. Ive tried directly creating the map object but it needs a panel to display on.
So you're panel code should go something like so:
NPApp.views.Mapcard = new Ext.extend(Ext.Panel({
iconCls : 'map',
title : 'Map',
layout: 'card',
ui: 'light',
items: [map],
listeners:{
}
});
)
It took me ages of going thru a dozen or more examples to make the current location work. This is a combination of several codes and a bunch of stuff in the Google API.
Lemme know if you have any more questions about Google Maps or directions.
Cheers :)
Sasha
Related
I'd like to be able to edit the content attribute of visjs timeline items in the timeline itself. However, when I use an input as part of a template, it doesn't appear to receive any mouse events; I can't click in it and type anything, and clicking buttons doesn't work, either. Buttons appear to get the mouseover event, though:
function test(item) {
alert('clicked');
}
var options = {
minHeight: '100%',
editable: true,
moveable: false,
selectable: false,
orientation: 'top',
min: new Date('2015-01-01'),
max: new Date('2015-12-31'),
zoomMin: 1000 * 4 * 60 * 24 * 7,
margin: {
item: 10,
axis: 5
},
template: function(item) {
return '<div onClick="test"><input value="click in the middle"></input><button onClick="test">test</button></div>'
}
};
/* create timeline */
timeline.on('click', function (properties) {
var target = properties.event.target;
if(properties.item) properties.event.target.focus();
});
https://codepen.io/barticula/pen/EpWJKd
Edit: Code above CodePen example have been updated to use the click event to focus on the input, but all other normal mouse behavior is missing. Keyboard events appear to function normally.
To get a reaction with a click on a timeline element, you can use the library's own events (see events on doc and this exemple on website).
On your example, you could do something like this among other possible solutions in pure javascript including...
// Configuration for the Timeline
var options = {
minHeight: '100%',
editable: true,
moveable: false,
selectable: false,
orientation: 'top',
min: new Date('2015-01-01'),
max: new Date('2015-12-31'),
zoomMin: 1000 * 4 * 60 * 24 * 7,
margin: {
item: 10,
axis: 5
},
template: function(item) {
return '<div id="test-div"><input placeholder="hey" type="text" id="inputTest" ><button id="test-button">test</button></div>'
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
timeline.on('click', function (properties) {
var target = properties.event.target;
if(properties.item) alert('click on' + target.id);
});
UPDATED
It is difficult to know exactly what you want to do because there are several possible solutions anyway.
Eventually, I propose another snippet below and a codepen updated.... but will it meet your need, not sure ?
2nd UPDATE (for another work track, see comments)
// Configuration for the Timeline
var options = {
minHeight: '100%',
editable: true,
moveable: false,
selectable: false,
orientation: 'top',
margin: {
item: 10,
axis: 5
},
template: function(item) {
return '<div><input placeholder="edit me..." type="text"></input><button>send value</button></div>'
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
timeline.on('click', function(properties) {
var target = properties.event.target;
var item = items.get(properties.item);
console.log(properties.event);
// if (properties.item && target.tagName === "DIV") focusMethod(target);
if (properties.item && target.tagName === "INPUT") target.focus();
if (properties.item && target.tagName === "BUTTON") getInputValue(item, target);
});
focusMethod = function getFocus(target) {
// target.insertAfter("BUTTON");
target.firstChild.focus();
}
getInputValue = function getValue(item, target) {
target.focus();
var inputValue = (target.parentNode.firstChild.value) ? target.parentNode.firstChild.value : "no value entered ";
alert("Input value : " + inputValue + " => send by: " + item.content)
}
Using leaflet.draw, I instantiate the drawControl I with:
scope.drawOptions = {
position: 'topright',
draw: {
polyline: false,
polygon: {
icon: new L.DivIcon({
iconSize: new L.Point(16, 16),
className: 'leaflet-div-icon leaflet-editing-icon my-own-class'
}),
allowIntersection: false,
drawError: {
color: '#5878B8',
message: '<strong>Oh snap!<strong> you can\'t draw that!'
},
shapeOptions: shapeOptions
},
circle: false, // Turns off this drawing tool
rectangle: false,
marker: false
},
edit: {
featureGroup: self.featureGroup
}
};
scope.drawControl = new L.Control.Draw(scope.drawOptions);
map.addControl(scope.drawControl);
But the style reverts back to the "default" when entering edit mode. I tried to combat this with:
map.on('draw:editstart', function(e) {
scope.drawControl.setDrawingOptions({
polygon: {
icon: new L.DivIcon({
iconSize: new L.Point(16, 16),
className: 'leaflet-div-icon leaflet-editing-icon my-own-class'
})
},
})
});
But that didn't help. Any suggestions?
There's a closed github issue on this but I couldn't figure it out: https://github.com/Leaflet/Leaflet.draw/issues/48#issuecomment-141546589
I created this jfiddle if anyone wants to play around: http://jsfiddle.net/markdickersonvt/mwz7pg2n/
Like this?
Basically, I just extend the L.Edit.Poly class
L.Edit.Poly = L.Edit.Poly.extend({
options : {
icon: new L.DivIcon({
iconSize: new L.Point(20, 20),
className: 'leaflet-div-icon leaflet-editing-icon my-own-icon'
})
}
});
I used to use the Draw plug-in, and abused extending default methods to get rid off tooltip for example. I think this is the best thing to do, this is why leaflet has been designed this way.
hello i'm trying to add google maps for my window i'm using mvc i didn't see any example based on mvc here is my code
Ext.define('UserApp.view.uiTypes.GoogleMaps',{
extend: 'Ext.panel.Panel',
width:800,
height:250,
bodyPadding: 5,
title:'Google Maps',
requires: ['Ext.ux.GMapPanel'],
items:[
{
xtype: 'textfield',
label: 'test'
},
{
xtype:'textfield',
label:'hellworld'
},
{
xtype: 'gmappanel',
region: 'center',
id: 'mygooglemap',
zoomLevel: 3,
gmapType: 'map',
mapConfOpts:['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
'lat': 37.4419,
'lng': -122.1419,
marker:{ title: 'Palo Alto'}
}
}
],
});
error in console
Uncaught Error: Invalid value for property : function (){var a=this,b;if(a.isVisible()){b=a.el.getAlignToXY(a.container,"c-c");a.setPagePosition(b)}else{a.needsCenter=true}return a}
Since you are already using GMapPanel3....
You can try to do something like this :
var smallGoogleMap = {
xtype: 'gmappanel',
id :'gSmallSiteMap',
width:'100%',
height:200,
zoomLevel:10,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
lat: 42.339641,
lng: -71.094224,
marker: {
title: 'Boston Museum of Fine Arts',
listeners: {
click: function(e) {
Ext.Msg.alert('It\'s fine', 'and it\'s art.');
}
}
}
}
}
Ext.getCmp('some div or window').add(smallGoogleMap);
OR : You can simply replace the part inside items[] and put the variable smallGoogleMap.
Let me know if this doesn't work!
I'm showing current time on a button in Sencha-2. Time is updating but only once.
I want continuous updation
Below is my code:-
Ext.define("Stackoverflow.view.Demo", {
extend: "Ext.Container",
alias: "widget.demo",
config: {
items: [{
xtype: "toolbar",
id: 'clocktool',
docked: "bottom",
items: [
{
xtype: 'button',
itemId: "clock",
id:'clock',
text: Ext.Date.format(new Date(),'g:i:s A')
}
]
}]
},
initialize: function(){
console.log("initializing main view");
Ext.defer(this.refreshDate, 1000, this);
},
refreshDate: function() {
console.log("refreshing date");
var btn = Ext.getCmp('clock');
btn.setText(Ext.Date.format(new Date(),'g:i:s A'));
console.log("done");
}
});
Thanks in advance. Any other approach for showing the time in sencha-2 is also welcomed.
When the view that contains the button initiates, just do something like this :
Ext.defer(this.refreshDate, 1000, this);
Then juste create a function called refreshDate :
refreshDate: function() {
var btn = ... // get your button
btn.setText(Ext.Date.format(new Date(),'g:i:s A'));
Ext.defer(this.refreshDate, 1000, this);
}
Hope this helps
I am building an application and I am trying to keep it object oriented. The issue is that the alert box doesn't appear when the button is clicked. I believe it is an issue with the scope of the button. It could also be related to the way i am building my app. It is based off of an example provided by Sencha. I have searched, and tried many things, but I haven't come up with a solution. Here is my code:
Ext.require([
'Ext.grid.*',
'Ext.panel.*',
'Ext.msg.*'
]);
Ext.Loader.onReady(function() {
Ext.define('App.SimplePanel', {
extend: 'Ext.Panel',
alias: 'widget.SimplePanel',
width: 100,
height: 50,
initComponent: function() {
this.buttons = [{
text: 'Trigger Alert',
scope: this,
hander: function(){
Ext.Msg.alert('Title', 'TestAlert');
}
}];
this.callParent();
}
});
}, false);
Ext.onReady(function() {
// create an instance of the app
var simplePanel = new App.SimplePanel({
renderTo: document.body,
});
});
The issue is property should be called handler not hander
this.buttons = [{
text: 'Trigger Alert',
scope: this,
handler: function(){
Ext.Msg.alert('Title', 'TestAlert');
}
}];