We Keep Coding

Why Ext.MessageBox gets stuck after several clicks on "Ok" button?

I use MessageBox of ExJS framework to show dialog with "Ok" button.
// app.js
function showNoteMessage (title, message, fn, scope) {
return Ext.Msg.show({
title: 'Title example',
message: 'Message text',
buttons: Ext.MessageBox.OKCANCEL,
promptConfig: false,
fn: function () {
if (fn) {
fn.apply(scope, arguments);
}
},
scope: scope
});
}
// index.html
<button onclick="showNoteMessage()">Open dialog several times</button>
Steps to reproduce:
Open dialog with provided two buttons "Ok" and "Cancel".
Click on the "Ok" button
Open dialog one more time.
When you click on "Ok" one more time, the dialog gets stuck on the screen and unlock all content behind it.The buttons inside the dialog are disabled.
Current version Ext.js 2.4.2.571.
After click on "Ok" button or "Cancel", gray background disappears and dialog gets stuck with unlocking content under it. I try to wrap Ext.Msg.show into setTimeout but it looks like it works only locally.
Update
I continue working on this bug and found out that issue can be in this function:
// MessageBox.js
...
onClick: function(button) {
if (button) {
var config = button.config.userConfig || {},
initialConfig = button.getInitialConfig(),
prompt = this.getPrompt();
if (typeof config.fn == 'function') {
button.disable();
this.on({
hiddenchange: function() {
config.fn.call(
config.scope || null,
initialConfig.itemId || initialConfig.text,
prompt ? prompt.getValue() : null,
config
);
button.enable();
},
single: true,
scope: this
});
}
}
this.hide();
},
...
For some reason on the step with broken click it skips this part of code:
this.on({
hiddenchange: function() {
config.fn.call(
config.scope || null,
initialConfig.itemId || initialConfig.text,
prompt ? prompt.getValue() : null,
config
);
button.enable();
},
single: true,
scope: this
});

The issue was related to the old version of ExtJS. I was not able to update it, so found a workaround: to disable animation like this:
// app.js
...
Ext.Msg.defaultAllowedConfig.showAnimation = false;
Ext.Msg.defaultAllowedConfig.hideAnimation = false;
...

How do i edit a Javascript / Bootbox/ Bootstrap confirm window?

I have a simple bootbox / javascript confirm window at:
https://www.guard-gate.com/test2/index.html
How do I make the Success button link to google, the Danger button link to yahoo.com and the Click Me button close the box?
How do I change the position of the window to get it in the middle of the page?

You could try something like this for setting the modal in the middle:
var windowHeightCalc = $(window).height() / 2,
modalHeightCalc = $('.modal-content').height();
$('.modal').css({ 'margin-top': [windowHeightCalc - modalHeightCalc, 'px'].join('') });
You don't really need Bootbox for making the modal just use the default Bootstrap modal - http://getbootstrap.com/javascript/#modals
You can modify it and change the links as you wish. To open it simply run:
$('#myModal').modal('show');
and to hide it:
$('#myModal').modal('hide');

In Bootbox you could try using that what the documentation advise you:
bootbox.dialog({
message: "I am a custom dialog",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function() {
Example.show("great success");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function() {
Example.show("uh oh, look out!");
}
},
main: {
label: "Click ME!",
className: "btn-primary",
callback: function() {
Example.show("Primary button");
}
}
}
});
In the callbacks you could do everything. For JS-redirects you can do:
window.location.href = "http://whatever.com";

How to wireup an AngularStrap modal show event

I have the modal displaying just fine. I'm trying to figure out how to run a function when the modal is shown.
var = loginModal = $modal({ placement: 'left', title: '', content: webauth, show: false });
$scope.$on('modal.show', function () {
console.log("SHOWN");
debugger;
});
$scope.showModal = function () {
loginModal.$promise
.then(loginModal.show);
};
I was expecting the $scope.$on('modal.show') to fire when the modal is shown, but no luck so far.

Try this:
$scope.showModal = function() {
myModal.$promise.then(myModal.show).then(function(){
console.info('shown');
});
};

Override Magnific Popup close method when using the open method

I'm trying to override the Magnific Popup close method (as outlined in the documentation and answered here by the developer in another question). However, when using the open method to create the popup (rather than attaching to an element in the DOM), the $.magnificPopup.proto isn't accessible.
Here's my example of non-working code. As you can see, I'm trying to override the close method once the popup opens. The console.log fires when I try to close (either by my Close button or by hitting ESC) but the box does not close.
$.magnificPopup.open({
items: {
src: '/path/to/file',
type: 'ajax',
},
callbacks: {
open: function() {
$.magnificPopup.instance.close = function() {
console.log('close override is working');
$.magnificPopup.proto.close.call(this);
}
},
ajaxContentAdded: function() {
var m = this;
this.content.find('.redbutton').on('click', function(e) {
e.preventDefault();
m.close();
});
}
},
closeOnContentClick: false,
closeOnBgClick: false,
showCloseBtn: false,
enableEscapeKey: true
});
How can I close the box?

Calling functions with click handlers in ExtJS 4

I have a function inside a toolbar, let's call it:
Ext.define('MyArchive.Toolbar', {
search: function() {
console.log('searching');
}
}
Now I'd like to call this function when clicking a button. So I'm adding some click handlers in the afterRender on the toolbar setup:
afterRender: function() {
Ext.getCmp('search-button').on('click', this.search);
}
However, this doesn't work and I ultimately need to go the full route of:
afterRender: function() {
Ext.getCmp('search-button').on('click', function() {
quick_search();
)};
}
Any particular reason why my first attempt doesn't apply the click handler as I expect?
Thanks for any explanations or refactorings! Additional patterns/idioms welcome...

Next try:
var panelOverall = new Ext.form.FormPanel({
html: 'bla',
search: function() {
console.log('searching');
},
buttons: [
{
text: 'Moo',
id: 'button1',
handler: function(){
//window.destroy();
}
}
],
afterRender: function() {
Ext.getCmp('button1').on('click', this.search);
}
});
is working for me.. am I missing something?