How to change the default zoom level in sencha touch 2?
Presently I am using code like this
var gmaps={
xtype : 'panel',
height : Math.ceil(Ext.Element.getDocumentHeight()*.25),
width : Math.ceil(Ext.Element.getDocumentWidth()*.96),
layout:'card',
items:[{
xtype: 'map',
useCurrentLocation: true,geo: geo, //Ext.util.Geolocation object
useCurrentLocation: geo, //same var geo with geolocation object
config: {
mapOptions:{
zoom: 25,
disableDefaultUI: true,
//--Available Map Options--//
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
},
But even if I change value for zoom, it does not change
That is because you put you mapOptions object in a config object.
Just remove the config object and you should be all set :
xtype: 'map',
useCurrentLocation: true,geo: geo, //Ext.util.Geolocation object
useCurrentLocation: geo, //same var geo with geolocation object
mapOptions:{
zoom: 25,
disableDefaultUI: true,
//--Available Map Options--//
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
},
Hope this helped
Related
Im using "mavon-editor" from "https://github.com/hinesboy/mavonEditor/blob/HEAD/README-EN.md" and this is my config object:
{
bold: true,
italic: true,
header: true,
underline: true,
strikethrough: true,
mark: true,
superscript: false,
subscript: false,
quote: true,
ol: true,
ul: true,
link: true,
imagelink: true,
code: true,
table: true,
fullscreen: true,
readmodel: true,
htmlcode: false,
help: true,
undo: true,
redo: true,
trash: true,
save: false,
navigation: false,
alignleft: true,
aligncenter: true,
alignright: true,
preview: false,
defaultOpen: 'edit',
subfield: false,
toolbarsFlag: false,
}
Because my "subfield" is false then I can't collapse the preview panel but its always open. There is a reference to the "defaultOpen" but no matter what I do the panel is always in view when I'd like to have it hidden and not have the ability to open the preview panel. Does anyone have any ideas on what I'm doing wrong?
It's been days that I'm working on setting the swiper in my application but I still no luck and found no working sample anywhere from here to the Github issues or elsewhere on the net.
I can not set a dynamic height for the swiper in vertical mode via none of the suggested solutions to this problem.
I have several images as slides that give a height of thousands of pixels but if I switch it to a text it is fine as the height of the text is like 10 px. Any div above a certain height will result in abnormal height.
I found that the suggested CSS does not work as it just limits the height of the window and is very unpleasant as the pictures are cut off.
The js solutions are the correct way to do it but I can not find a working solution and the ones that I have tried all result in half of the job solutions.
It seems the correct way uses the onSlideChangeStart to correct the next slide height like below but this does not work as the swiper of the vertical is not recognized in its own settings.
onSlideChangeStart: (swiper)->
$(swiper.slides).each ->
$(this).css height: if $(this).index() != swiper.activeIndex then 0 else 'auto'
I tried to use the active class instead of the API as it is not working when calling even the swiperV.activeIndex in its own onSlideChangeStart like below but swiper-slide-active is not defined.
This is my settings for the 3 nested sliders.
var swiperVV = new Swiper('.swiper-container-vv', {
direction: 'vertical',
updateOnWindowResize: true,
grabCursor: true,
loop: true,
mousewheel: true,
lazy: true,
zoom: true,
effect: 'slide',
spaceBetween: 0,
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
});
var swiperH = new Swiper('.swiper-container-h', {
initialSlide:0,
spaceBetween: 0,
autoHeight: true,
updateOnWindowResize: true,
grabCursor: true,
loop: true,
parallax: true,
lazy: true,
effect: 'slide',
pagination: {
el: '.swiper-pagination-h',
clickable: true,
},
scrollbar: {
el: '.swiper-scrollbar',
hide: true,
},
});
var swiperV = new Swiper('.swiper-container-v', {
direction: 'vertical',
autoplay: {
delay: 5000,
},
autoHeight: true,
updateOnWindowResize: true,
grabCursor: true,
loop: true,
mousewheel: true,
lazy: true,
zoom: true,
effect: 'slide',
spaceBetween: 0,
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
slideChange: resizeSwiper()
});
function resizeSwiper() {
console.log($('.swiper-container-v .swiper-slide swiper-slide-active').height());
$('.swiper-container-v, .swiper-container-v .swiper-slide').css({ height: $('.swiper-container-v .swiper-slide .swiper-slide-active').height() });
}
i have gone through all the samples of suggested users like the ones listed below in github, stackoverflow and codepen.
https://github.com/nolimits4web/swiper/issues/48
https://github.com/nolimits4web/Swiper/issues/153
This is the workaround worked for me
if (typeof Swiper != "undefined"){
var popularSwiper = new Swiper(".popularSwiper", {
direction: "vertical",
autoHeight: true,
autoplay: {
delay: 5000,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
on:{
init:function(){
setSlideHeight(this);
},
slideChangeTransitionEnd:function(){
setSlideHeight(this);
}
}
});
function setSlideHeight(that){
$('.swiper-slide').css({height:'auto'});
var currentSlide = that.activeIndex;
var newHeight = $(that.slides[currentSlide]).height();
$('.swiper-wrapper,.swiper-slide').css({ height : newHeight })
that.update();
}
}
It's working for me.
calculate the total height of the swiper container including gap between slides.
then set the swiper container height to the previously calculated height
let pdpThumb = new Swiper('#pdp-thumbCarousel', {
slidesPerView: 4,
direction: 'vertical',
spaceBetween: 10,
freeMode: true,
loop: true,
on: {
init: (swiper) => {
let totalGap = swiper.passedParams.spaceBetween * (swiper.passedParams.slidesPerView - 1);
let containerHeight = swiper.passedParams.slidesPerView * swiper.slides[0].clientHeight + totalGap;
swiper.el.style.height = containerHeight + 'px';
},
},
});
I have a Tab Panel and in that i have added a grid Panel. Now when i re-size my browser window (as in make it small), i want the grid columns and all other components to be shrinked and adjust the sizes so it would show the view in any window size. how can i do this ?
I am using sencha-architect2
Ext.define('App.view.ExView', {
extend: 'Ext.tab.Panel',
autoRender: true,
autoShow: true,
frame: true,
height: 600,
id: 'mainpanel',
width: 1360,
maintainFlex: false,
suspendLayout: false,
hideCollapseTool: false,
title: 'Example Project',
titleCollapse: false,
activeTab: 0,
plain: true,
fullscreen: 'true',
GRID
items: [
{
xtype: 'gridpanel',
autoShow: true,
height: 100,
minHeight: 40,
minWidth: 50,
autoScroll: true,
title: 'Grid',
store: 'storegrid',
layout: {
type: 'fit'
},
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
maintainFlex: false,
dataIndex: 'name',
flex: 1,
text: 'name'
},
{
xtype: 'gridcolumn',
maintainFlex: false,
dataIndex: 'age',
flex: 1,
text: 'age'
}
]
}
]
}
]
});
use anchor layout to your container
This is a layout that enables anchoring of contained elements relative to the container's dimensions. If the container is resized, all anchored items are automatically rerendered according to their anchor rules.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Anchor
I understood that by calling MyDetailView.Update(record.data) I send record.data to MyDetailView and can access them in the xtemplate:
tpl:'<h1>{title}></h1>'
Additionally I want to use record.data in an item of xtype 'map':
items: [
{
xtype: 'map',
getLocation: true,
padding: '20 0 0 0',
mapOptions: {
center : new google.maps.LatLng(lng, lat), // <-- here record.data.lat
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
]
How can I access the data in MyDetailView?
Thanks
----------------EDIT------------------
I add my complete code. In the list view I call an AppDetailcard.update(record.data).
var AppDetailcard = new Ext.Panel ({
id: 'detailcard',
styleHtmlContent: false,
tpl: 'my {lat}', //<-- here it works
fullscreen: true,
dockedItems: [AppDetailcardToolbar],
items : [
{
xtype: 'map',
getLocation: true,
mapOptions: {
center : new google.maps.LatLng(data.lat, data.lng), //<-- here it does not
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
]
You have to also push the new record into your items array.
this.down('map').setMapCenter({
latitude: newRecord.data.latitude,
longitude: newRecord.data.longitude
});
I usually push records, not data, into the view and then use the updateRecord event to accept that record and push it further down the items array.
Look at the navigationview example on the Sencha site, in the Show.js view file, where they do exactly that.
I have a question about xtypes. When I do this:
// map
var map = new Ext.map({
fullscreen: true,
getLocation: true,
mapOptions: {
zoom: 12
}
});
map.map.setCenter(new google.maps.LatLng(record.attributes.record.data.latitude, record.attributes.record.data.longitude));
Everything is fine, the map is showing up.
Now, when I work with xtypes, the 'map'-variable won't recognize the 'setCenter'-property.
Code:
var map =
{
fullscreen: true,
xtype: 'map',
title: 'Map',
getLocation: true,
useCurrentLocation: true,
mapOptions:
{
zoom: 12
}
};
map.map.setCenter(new google.maps.LatLng(record.attributes.record.data.latitude, record.attributes.record.data.longitude));
With this code, I get this in the console:
Uncaught TypeError: Cannot call method
'setCenter' of undefined
I hope someone can help me. Thanks in advance!
When you are calling map.map.setCenter(), your map object has already been instantiated. By defining your map with xtype, lazy instantiation is used.
You could try somethign along the lines of:
{
xtype: 'map',
fullscreen: true,
getLocation: true,
mapOptions: {
zoom: 12
},
listeners: {
maprender: function(component, map) {
map.setCenter( ... )
}
}
}