I am having difficulties implementing the destroy method on my popup. Everything works fine, the below code works for having one popup that changes its contents depending what is clicked on. But I notice that my content (media) still plays when hiding the popup. I'd like to destroy it completely, and re-create on click. I've not really found anything in the forums that helps me achieve this, so I think it will help others too :-)
There are a couple of things confusing me, as there is already a click listener on the markers, which initiates the popup, where should I put the destroy code? Should I be declaring it as a separate function outside the popup, then calling it on beforehide somehow?
function addMarker(country)
{
if (true)
{
var image = new google.maps.MarkerImage(country.image48Path);
var marker = new google.maps.Marker({
map: map.map,
title: country.title,
position: country.position,
//draggable: true,
icon:image
});
var goToCountryWrapper = function (button, event)
{
goToCountry(country, this.popup);
};
google.maps.event.addListener(marker, 'click', function()
{
if (!this.popup)
{ ---> Should I be placing destroy code here?
this.popup = new Ext.Panel(
{
floating: true,
modal: true,
centered: true,
width: 800,
height: 600,
styleHtmlContent: true,
scroll: 'vertical',
items:[(new countryOverlay(country)).overlayPanel,
{
xtype:'button',
margin: 20,
ui:'action-round',
text:'Click here to view more promo videos',
handler:goToCountryWrapper,
scope : this
},],
layout: {
type: 'auto',
padding: '55',
align: 'left'
},
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
title: country.title
}],
---> Should I be placing a listener here for beforehide, destroying here?
});
};
this.popup.show('pop');
});
}
};
---> Should I be placing the destroy code after, as a seperate function?
Thanks,
Digeridoopoo
I presume you want to destroy it when you hide the popup? If so, you should listen tot he hide event and then destroy it then.
this.popup.on('hide', function() {
this.popup.destroy();
}, this);
Check this
hideOnMaskTap:true,
listeners : {
hide: function() {
this.destroy();
}
},
Related
I am developing a Task pane word add-in using JavaScript API, I have used below code to create a jQuery dialogbox dynamically using a function:
function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">'
+ dialogText + '</div>').dialog({
draggable: true,
modal: true,
resizable: false,
width: 'auto',
title: dialogTitle || 'Confirm',
minHeight: 75,
position: {
my: "center",
at: "center",
of: window
},
buttons: {
OK: function() {
if (typeof(okFunc) == 'function') {
setTimeout(okFunc, 50);
}
$(this).dialog('destroy');
},
Cancel: function() {
if (typeof(cancelFunc) == 'function') {
setTimeout(cancelFunc, 50);
}
$(this).dialog('destroy');
}
}
});
}
But when i open it first time to call myConfirm function, the page scroll goes to top and when i scroll down to click on dialog-box it again send the scroll back to top then i need to again scroll down, now i am able to click on dialog-box buttons. it works fine after first.
I need to set dynamically text of box and function on button clicks so i am creating it dynamically. I have also test it on Internet Explorer, it's working fine.
Please advice how i can fix it for word add-in.
You can try below code when you are calling your function :-
onclick="myConfirm();return false;"
Just add "return false;" after your function name as shown above.
Edit 1:-
Or you can return false from your function as well.
Edit 2 :-
$form.show().dialog({
close: function (event) { event.preventDefault(); }
resizable: false,
etc....
});
I am using owlCarousel inside an accordion. Every thing is fine until i resize the window.
After resizing if the accordion was already opened it looks perfect but if it was closed during resize the carousel height goes to 0.
I have tried to use .refres() method of owl carousel but it didn't worked.
I found the solution here.
The solution was given by ses & improvised by tofumedia
As ses quoted:
OWL start for the JS Accordion, and need a resize refresh
JS:
$('.owl-carousel').owlCarousel({
margin: 0,
responsiveClass: true,
nav: false,
dots: true,
items: 1,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});
$("#accordion").accordion({
heightStyle: "content",
header: ".accordionHeadline",
collapsible: true,
active: 0,
beforeActivate: function (event, ui) {
window.dispatchEvent(new Event('resize'));
}
});
Or a more reliable solution which supports IE:
$("a[data-toggle='tab']").on('shown', function () {
var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false,window,0);
window.dispatchEvent(evt);
});
So to give you an idea of what I am working with, I have a popped up modal that contains a series of individual forms in the modal. Based off the current selection, the forms will be either disabled, or enabled. If they are disabled, I would like to display a message box over the disabled form in the modal explaining why it is disabled.
I've tried using Ext.msg.alert and other forms of Ext.msg, however I am unsuccessful in getting them to remain over the forms. I can align them over the form, but upon scrolling it doesn't stay over the form, it just stays fixed in the main window position, instead of follow the form inside the modal. Is this possible to do?
I then tried to do it in a hackish way and set a loading mask over the form, which displays the message, but that as well moves when you scroll down.
I attempted to use the 'fixed' property of the components, but it seemed to do nothing.
I am not sure if I am looking at this from the wrong angle or what, but things don't seem to be working out for me.
Any ideas?
listeners:{
afterlayout: function(form, eOpts){
if(form.disabled){
var msg = Ext.Msg.alert({title:'Disabled', modal: false, fixed: true, msg:'Blah blah blah mmmkay.'});
msg.alignTo(form.el, 'c-c');
//fixed
}
}
},
Try this and let me know the result. Basically, we can override the base components or write our components.
Ext.define('Artlantis.view.OverlayWindow', {
extend: 'Ext.window.Window',
alias: 'widget.overlaywin',
defaults: {
autoScroll: true
},
layout: 'fit',
width: '50%',
height: '50%',
modal: true,
closeAction: 'destroy',
initComponent: function() {
this.callParent(arguments);
}
});
// to call this component
Ext.create('Artlantis.view.OverlayWindow',{
title: 'Disabled',
items: [
{
xtype: 'panel',
items: [
...
]
}
]
});
// or call by xtype
...
xtype: 'overlaywin'
I am new to sencha touch.
I have a problem with the button tap event. Actually I have a button with a background image that is declared in the cls property of Button:
Ext.define('app.view.common.PageHeader', {
extend: 'Ext.Container',
xtype: 'pageHeader',
config: {
items: [
{
xtype: 'button',
left: 10,
top: 10,
baseCls: 'null',
cls: 'btn_back', //with background:url('btn_img.png')
listeners: {
tap: function () {
console.log('button tapped...');
//history.back();
this.removeCls('btn_back');
this.addCls('btn_press');
},
release: function () {
console.log('button released..');
}
}
}
]
}
});
Now I just want to change the background image of the button when the button is tapped using removeCls() and addCls().
But from Sencha documentation I have not found any event like that.
So is there and way to do this?
Just remove all listeners and handlers you have written. It's simply the pressedCls config for your button. For example:
pressedCls: 'css_properties_when_the_button_is_pressed'
Hope this helps.
I have a problem abaout Sencha. I would like to make some calculations when a panel visually deactivated. I think 'deactive' public event had to supply this. but i didn't do that for all the things that i tried. is there anybody have any idea?
var hastaDetayCard;
enlil.views.HastaDetay = Ext.extend(Ext.Panel, {
scroll: 'vertical',
layout: {
type: 'vbox',
align: 'stretch'
},
cls: 'hasta-detay',
listeners:{
el:
{
deactive:function()
{
// /////calculations;
}
},
scope:this
}
});
The event is deactivate, not deactive.
And you probably don't need to put it into the element ("el:{..}" stuff in your code).