I extend a Ext.List and want to disable the container draggale (like pullrefresh) and retain scrollable, the config is draggable:false,scrollable:true,however that does not work,is that a sencha touch bug or i am not understand the config,can anyone help me?
my question is called overscrolling,using this config:
scrollable : {
momentumEasing: {
momentum: {
acceleration: 30,
friction: 0.5
},
bounce: {
acceleration: 0.0001,
springTension: 0.9999,
},
minVelocity: 5
},
outOfBoundRestrictFactor: 0
}
Related
I use Mapbox and my goal is to create a rectangle from my bounds. I also center my map into the bounds.
While Mapbox can figure out all my four coordinates for fitBounds, it does not do the same thing for the line. Instead it draws the line as a line between the two points.
How can I...
...draw a rectangle instead?
...calculate the other two coordinates needed?
A part of the code
const bounds = [
[17.76069212, 59.22761885],
[18.20001876, 59.44007814],
];
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11",
});
map.fitBounds(bounds, {
padding: 16,
});
map.on("load", () => {
map.addSource("route", {
type: "geojson",
data: {
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: bounds,
},
},
});
map.addLayer({
id: "route",
type: "line",
source: "route",
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-color": "#888",
"line-width": 8,
},
});
});
I saw turf.js and it seems possible with it, but it's a large library to just draw a rectangle.
I will accept a library as an answer if it's small.
If the solution is a math formula, I need a code example to get the hang of it.
With your pair of bounds coords you always can create a rectangle in mapbox without any library... it's a matter of creating the 4 corners using your data of bottom-left/top-right.
Mapbox requires to create a fifth point that is the same as the initial one.
Using yours you can create a feature to add to your line layer, and it will paint a rectangle... it would be like this:
{
"geometry": {
"coordinates": [
[
[
17.76069212,
59.22761885
],
[
17.76069212,
59.44007814
],
[
18.20001876,
59.44007814
],
[
18.20001876,
59.22761885
],
[
17.76069212,
59.22761885
]
]
],
"type": "Polygon"
},
"type": "Feature",
"properties": {}
}
I am trying to make my map zoom in to a cluster when the user clicks the cluster. The map is built with mapbox gl and Vue-Mapbox. I understand I can use the getClusterExpansionZoom() method to do so, but the first step is detecting which cluster the user clicked on. My #click handler does not detect clicks. Why not? What must I change? Cheers
<template>
<div>
<MglMap>
<MglGeojsonLayer
class="mgl-clusters-layer"
layerId="clustersLayerId"
:layer="clustersLayer"
:source="clustersSource"
sourceId="clustersSourceId"
#click="clickedCluster()"
/>
</div>
</template>
These variations also do not work...
#click="clickedCluster"
#map-click="clickedCluster()"
#click.prevent="clickedCluster"
Here is my event handler...
methods: {
clickedCluster() {
console.log("clicked cluster");
}
}
Here is the definition of the clustersSource object
clustersSource: {
type: "geojson",
cluster: true,
clusterRadius: 25,
clusterProperties: { sum: ["+", ["get", "docCount"]] },
data: {
type: "FeatureCollection",
features: []
}
},
data.features array of simple geojson points
Here is the definition of clustersLayer...
clustersLayer: {
id: util.getRandomValue(),
type: "circle",
filter: ["has", "point_count"],
paint: {
"circle-color": "#6a0dad",
"circle-opacity": 0.4,
"circle-stroke-color": "#6a0dad",
"circle-stroke-width": 1,
"circle-radius": [
"step",
["get", "sum"],
8,
100,
10,
1000,
12,
10000,
14,
100000,
16,
1000000,
18
]
}
},
This works...
//Make map zoom to a districts cluster when user clicks the cluster
this.map.on("click", "clustersLayerId", function(e) {
var features = $this.map.queryRenderedFeatures(e.point, {
layers: ["clustersLayerId"]
});
$this.map.easeTo({
center: features[0].geometry.coordinates,
zoom: $this.map.getZoom() + 1
});
});
You also have to specify the id in the clustersLayer object...
clustersLayer: {
id: "clustersLayerId",
type: "circle",
filter: ["has", "point_count"],
paint: {
"circle-color": "#6a0dad",
"circle-opacity": 0.4,
"circle-stroke-color": "#6a0dad",
"circle-stroke-width": 1,
"circle-radius": [
"step",
["get", "sum"],
8,
100,
10,
1000,
12,
10000,
14,
100000,
16,
1000000,
18
]
}
},
Is there a way to reorder entries of the side bar of a w20-business-theme based web application having its master page generated automatically (other than using categories).
Thank you!
To sort side bar's entries, we need to use the sortKey property.
Small example:
"routes": {
"home": {
"template": "<h1>Hello World!</h1>",
"hidden": true
},
"components1": {
"templateUrl": "{demo}/views/components.html",
"sortKey": 10
},
"components2": {
"templateUrl": "{demo}/views/components.html",
"sortKey": 30
},
"components3": {
"templateUrl": "{demo}/views/components.html",
"sortKey": 20
},
"components4": {
"templateUrl": "{demo}/views/components.html",
"sortKey": 50
}
}
in Sencha Touch 2.1 how can I load the chart dynamically from json, also with dynamic fields store, chart axes, and chart series,
I know maybe this is too much, but I need to display many kind of data, If I create 1 chart component for each display means I have to create more than 15 chart component, I'm afraid it get bloated
I did not complete this dynamically, but I made it seem dynamic.
I first request a user to fill out a form.
I also have multiple panels that holds charts with empty stores, in the form of several different layouts.
Based on the user's form, I show and hide panels, or chart when they need to be displayed only after loading the store with the required data.
yes it is bulky, and they are static, but I found it slightly easier to handle than dynamically loading.
EDIT
After thinking,
have you tried a function like
function dynamiccharts(var1, var2, var3){
return Ext.chart.Chart({
....
})
}
variables would include things like data, url, store or etc.
This is my example creating a chart on controller inside a panel: axis, series, store fields, url are became parameters, PAR_FORM is global variable showing the difference between views, I'm using this code for another chart (Column, Pie)
Ext.define("Geis.controller.app", {
extend: "Ext.app.Controller",
config: {
refs: {
mainview: 'mainview',
barchartview: 'barchartview',
btnShowChartAnggaran: '#btnShowChartAnggaran'
},
control: {
'btnShowChartAnggaran': {
tap: 'onShowChartAnggaran'
}
}
}
createBarChart: function(fields, series_xfield, series_yfield, url) {
this.getBarchartview().add(new Ext.chart.CartesianChart({
id: 'barchartgenerateview',
store: {
fields: fields,
proxy: {
type: 'jsonp',
url: url
}
},
background: 'white',
flipXY: true,
colors: Geis.view.ColorPatterns.getBaseColors(),
interactions: [
{
type: 'panzoom',
axes: {
"left": {
allowPan: true,
allowZoom: true
},
"bottom": {
allowPan: true,
allowZoom: true
}
}
},
'itemhighlight'
],
series: [{
type: 'bar',
xField: series_xfield,
yField: series_yfield,
highlightCfg: {
strokeStyle: 'red',
lineWidth: 3
},
style: {
stroke: 'rgb(40,40,40)',
maxBarWidth: 30
}
}],
axes: [{
type: 'numeric',
position: 'bottom',
fields: series_yfield,
grid: {
odd: {
fill: '#e8e8e8'
}
},
label: {
rotate: {
degrees: -30
}
},
maxZoom: 1
},
{
type: 'category',
position: 'left',
fields: series_xfield,
maxZoom: 4
}]
}));
Ext.getCmp('barchartgenerateview').getStore().load();
},
onShowChartAnggaran: function() {
this.getBarchartview().remove(Ext.getCmp('barchartgenerateview'), true);
if (PAR_FORM == 'Dana Anggaran') {
this.createBarChart(['kode', 'keterangan', 'nilai'], 'keterangan', 'nilai',
Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_dana_anggaran_json/');
} else if (PAR_FORM == 'Alokasi Anggaran') {
this.createBarChart(['kode', 'keterangan', 'belanja_pegawai', 'belanja_barang', 'belanja_modal'],
'keterangan', ['belanja_pegawai', 'belanja_barang', 'belanja_modal'],
Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_alokasi_json/');
}
this.getMainview().animateActiveItem(1, {type:'slide', direction:'left'});
}
});
base on my experiment if you want to activate the interactions features you need to set the chart id dynamically too, for example by creating Global Counter Variable
In the sencha scrollable views, like Ext.dataview.ListView, we can always scroll the list of elements out of the screen.
If I take this example : http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/list
Is there a way to block the list item "Alana Wiersma" ? I want this item to be with "top <= 0px".
Your problem is exactly called overscrolling. Try this:
scrollable : {
direction: 'horizontal',
directionLock: true,
momentumEasing: {
momentum: {
acceleration: 30,
friction: 0.5
},
bounce: {
acceleration: 0.0001,
springTension: 0.9999,
},
minVelocity: 5
},
outOfBoundRestrictFactor: 0
}
My first guess would be to set up the scroller of the list with an initial offset
config:{
scrollable:{
direction:'vertical',
initialOffset : {x: 0, y: VALUE}
}
}
And replace VALUE with whatever value you need
Hope this helps