I have a sencha touch 1 app I've just upgraded to sencha touch 2, and I've got everything to work except the google map.
In ST1, I added this line to index.html:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
Then I added this to a panel:
{
xtype: 'map',
useCurrentLocation: false,
fullscreen: false,
layout: 'auto',
id: 'jobmap',
height: 400,
mapOptions: {
zoom: 12,
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
In ST2, the docs say to still add the reference to index.html, though their forums also seem to say to use app.json. I've tried both using the above code and nothing appears on the panel. The controls before and after it appear adjacent to each other.
I've even just tried:
{
xtype: 'map',
useCurrentLocation: true
}
and I still get nothing.
Any ideas?
The panel which contains your map should be set layout: 'card'.
Also, it's not necessary (or may cause errors) to set fullscreen: false or layout: 'auto', just remove them from your map config.
Hope it helps.
Related
We've just updated to the latest Highcharts version and now a few of our chart types have a new line connecting the tooltip to the point.
It's mainly obvious on charts with fixed tooltips.
Does anyone know how to remove this line without removing the border of the tooltip itself?
I have come up with a work around that involves setting the borderwidth of the tooltip to 0 and adding a rounded, bordered, coloured div to the tooltip using useHTML:true and disabling the shadow.
Though I dont want to do this for every chart as it seems a bit nasty.
This also affects bar and tree maps that I can see and I've trawled the documentation to no avail.
http://jsfiddle.net/mattscotty/bqw4bc4x/1/
Highcharts.chart('container', {
title: {
text: 'Fixed tooltip'
},
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
},
backgroundColor: 'rgba(255,255,255,0.8)',
//Uncomment below to remove line, but this also removes tooltip border
//borderWidth:0,
//shadow:false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
series: [{
data: [29.9, 71.5, 106.4]
}, {
data: [194.1, 95.6, 54.4]
}]
});
Thanks in advance.
By default tooltip's shape is set to a callout which has a chevron/line pointing to the point. You can change the tooltip's shape to, e.g. rectangle - which does not have any connector.
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
},
backgroundColor: 'rgba(255,255,255,0.8)',
shape: 'rect'
example: http://jsfiddle.net/bqw4bc4x/2/
The accepted answer only partially worked in Highstock. The connectors for the volume and indicator tooltips were suppressed, but I still had a connector from the DateTime box to the crosshair.
As an alternative to the shape: 'rect' hack, you can try:
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
},
split: false,
shared: true,
backgroundColor: 'rgba(255,255,255,0.8)'
These split: and shared: settings consolidate all the tooltip boxes into a single box. Provided that this meets your needs it seems to solve the connector issue.
Very odd design decision by Highcharts. The connectors are highly intrusive visually and I can't imagine that many designers will want to use them, but you can only disable them with a hack. What were they thinking?
I am using both the yogiben:autoform-map and the dburles:google-maps packages in my application. It seems that they dont work well together. The code that uses dburles:google-maps works fine, but the autoform map is throwing this error:
Exception from Tracker afterFlush function:
TypeError: undefined is not a function
at t.afMap.rendered (d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:210)
at p (d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:154)
at a (d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:154)
at d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:66
at Function.e._withTemplateInstanceFunc (d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:66)
at n (d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:66)
at null.<anonymous> (d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:66)
at d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:65
at Object.c._withCurrentView (d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:65)
at d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:65
My html:
{{#autoForm class="add" id="add" collection="ServiceProviders" type="insert"}}
{{> afQuickField name="businessname"}}
{{> afQuickField name="officelocation"}}
<button type="submit" class="btn">Create!</button>
{{/autoForm}}
My collection:
officelocation: {
type: String,
label: 'Location of Office',
autoform: {
type: 'map',
afFieldInput: {
type: 'map',
geolocation: true,
searchBox: true,
autolocate: true
}
} }
Also, this autoform was working perfectly fine till I added the dburles:google-maps package. It seems that "GoogleMaps" is not ready yet when this code is being called in autoform-map.coffee
GoogleMaps.init { libraries: 'places' }, () =>
mapOptions =
zoom: 0
mapTypeId: google.maps.MapTypeId[#data.options.mapType]
streetViewControl: false
This seems weird because I am already doing on meteor startup:
Meteor.startup(function() {
if (GoogleMaps.loaded()?false:true) {
GoogleMaps.load();
}
});
There is a conflict between these two packages as noted by yogiben here: https://github.com/yogiben/meteor-autoform-map/issues/9
I am using kendoui grid , which is shown when I click in a bubbletree(its like tree structure). The data in the grid comes dynamically on clicking bubbletree . The kendoui grid loads fine on first click but the grid overlaps on second click and so on gets overlapping .
I am using following code.
function showKendouiGrid(nodeCoordinate) {
var kendouiConstants = {
BASE_URL: 'http://',
DATA_URL: '/eventbot/public/bubbletreedata/list-category?category=' + nodeCoordinate.label,
PAGE_SIZE: 20,
GRID_HEIGHT: 100
}
jQuery("#grid").kendoGrid({
columns: [{
field: 'label',
title: "Activitiy",
}],
dataSource: {
serverPaging: true,
pageSize: kendouiConstants.PAGE_SIZE,
transport: {
read: {
url: kendouiConstants.BASE_URL + window.location.host + kendouiConstants.DATA_URL,
dataType: "json",
type: "GET"
}
},
schema: {
data: "data",
total: "total"
},
serverFiltering: true,
},
height: kendouiConstants.GRID_HEIGHT,
pageable: {
refresh: true,
pageSizes: true
},
selectable: "row",
scrollable: true,
filterable: true,
sortable: true,
});
}
There is another issue also that , the footer of kendoui grid shows "no items to display" , while it has items on it .
Thanks in advance.
Every time you click on the bubble tree, the grid is regenerated on the previous version of the grid. So, the first time you do it, all is fine and you end up with newly generated kendogrid markup which has its own wrapper elements in HTML. Next time you create the grid, it is recreated on the older and the wrappers are 'rewrapped' inside the previous ones.
What you should do is either .destroy() the grid or just change the grid datasource when the tree is clicked.
can anyone please point me in the right direction about how to implement google maps in sencha touch 2.2.1 in an MVC fashion? a good step by step tutorial maybe?
I need to have a view and a controller but am not sure what is the correct way of doing it as regards defining map options and initializing the map. Been looking at various tutorials on the Internet but none of them matches exactly what I want to implement.
I am using a tab panel and my map needs to be displayed when clicking one of the tabs (called Location)...
first, you have to put the map panel as item of your tab container:
{
xtype: 'map',
useCurrentLocation: false,
mapOptions: {
disableDefaultUI: true,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}
next, you can refer to it in the specific controller for this view in this way:
config: {
refs: {
...
mymap: '.map',
...
},
...
}
in that way you can have a reference of your map object in the controller by typing:
this.getMymap()
and can attach an handler to the map to make some action on it when it is rendered:
this.getMymap().on('maprender', this.onMapRender, this, { single: true });
where "onMapRender" is a method of your controller. You have to do in that way if you want, for example, render a marker over the map and center it, because before the "maprender" event dispatched by the map, you can not do any action over it (the GMap object simply does not yet exists), so, for example, in your controller, the handler could be:
onMapRender: function(e) {
var latLngCoordinates = new google.maps.LatLng(..., ...)
marker = new google.maps.Marker({
position: latLngCoordinates,
animation: google.maps.Animation.DROP,
map: this.getMymap().getMap()
});
this.getMymap().setMapCenter(latLngCoordinates);
}
enjoy with it ;)
In the code below, if I set the activeTab to 0, the contents of /viewer/welcome show up as expected. If I set activeTab to 1 (like below), the second tab is activated on load, but when I click on the first tab, the content never displays. I can see it loading the content for the tab BEFORE I click on the tab (if I set autoLoad: false, it doesn't load it at all), but even though it loaded, it doesn't display.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: true
},
layout: {
type: 'fit'
},
title: 'Welcome'
},
...
}
Why doesn't the content of the tab actually render when the tab is activated? Why does it work if that tab is the active tab on load, but not when it is activated otherwise?
If I make these changes, the text displays all the time as expected, but I get an extra page load from the spurious activate call.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: false
},
layout: {
type: 'fit'
},
title: 'Welcome',
listeners: {
activate: function(me, opts) {
me.getLoader().load();
}
}
},
...
}
I'm just not understanding why the tabs are not managing this content as part of being a tab.....
I think the problem here is what you have indicated - the tabs are not managing content. The reason why they are not managing it properly is the HTML content that gets returned from loader is just that - some HTML, it is not an ExtJS Component. It is arguable that ExtJS "should" manage content that it has loaded but the docs allude to the contrary: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-cfg-html It might be worth while filing a bug on this.
Also, I noticed you had a fit layout specified on the welcome panel. Since you have no other items contained in that panel, you probably don't need that setting - incidentally it may (or may not) improve how the loaded html fragment gets handled.
Good luck.
I found out that in ExtJS 5.1 using the reference name didn't work. Had to put in an itemId