Popup on popup, the popup below disappears - extjs

I am using the following listeners on the showwindowpopup to grey out(opaque) the background so that nothing is seen. But when I try to close this window, a confirmation window has to appear to confirm from user, but when this confirmation window appears the showwindowpopup behind it which is behind it gets greyed out as well and is not seen.
show: function(win) {
if (this.modal) {
var dom = Ext.dom.Query.select('.x-mask');
for(var i=0; i<dom.length;i++){
Ext.get(dom[i]).setStyle('opacity',1);
}
}
},
close: function(win) {
if (this.modal) {
var dom = Ext.dom.Query.select('.x-mask');
for(var i=0; i<dom.length;i++){
Ext.get(dom[i]).setStyle('opacity',0);
}
}
}
Can someone tell me how can I resolve this? I want the background to be greyed out except the showwindowpopup and the confirmation window. I want the showwindowpopup to be seen whene the confirmation window is open.

Can you Constrain the "show window popup" to the parent panel?

Related

Button click function not getting called in Typecsript

I am facing an issue while dynamically creating Button element in Typescript.
I am reading the properties from external config and accordingly creating buttons.
The buttons appear on the screen. Only the 'click' functionality doesn't get applied. i tried giving alert on button click, which does not appear on clicking the buttons. No error , no output.
Following is my code snippet:
for(var i=0; i< myArr.length; i++)
{
var button1 = document.createElement('button');
button1.textContent = "Connect To button " + [i];
button1.click = function()
{
alert("inside btn click function ");
}
docContent.appendChild(button1);
};
Can anyone help figure out what needs to be changed?
You would have to attach an click event listener to you button like so :
button1.addEventListener('click',()=>{
//This would be your callback function for the click event on button
})
The default event listener is "onclick", not "click". Just to:
button1.onclick = function() {alert('Clicked!');}
Working fiddle here.

On click opens a new tab I need to interact with, however I just stay on the same window

I am new to protractor and AngularJS just starting to get the hang of it. I have a login page that on click opens a new browser tab. The new browser tab is where I want to continue my test however I do not know how to do switch to the new browser tab.
I've tried the below code that was suggested here however it didn't do anything just stayed on the page.
element(by.css('span.icon.icon-add')).click();.then(function() {
browser.getAllWindowHandles().then(function(handles) {
newWindowHandle = handles[1]; // this is your new window
browser.switchTo().window(newWindowHandle).then(function() {
element.all(by.css("input[type$='text']")).first().clear().sendKeys('anemailaddy#newmarketinc.com');
});
});
});
Any help would be fantastic! Thank you
changed code to look like this:
this.clicksAddUser = function() {
element(by.css('span.booking-icon.icon-gear')).click();
element.all(by.css('li:nth-of-type(4) > a')).click().then(function() {
browser.getAllWindowHandles().then(function(handles) {
newWindowHandle = handles[1]; // this is your new window
browser.switchTo().window(newWindowHandle).then(function() {
element(by.css('span.icon.icon-add')).click()
element.all(by.css("input[type$='text']")).first().clear().sendKeys('anemailaddy#newmarketinc.com');
});
});
});
Because I was clicking a drop down menu in a separate this statement the drop down menu was closing before there was a chance to click on the login button. combined the code fixed the problem.

ExtJS 4: Problems with Message confirmation box on a modal window

I am currently facing a problem which seems to be a very common one for ExtJS or JavaScript users. I am facing a problem due to the Message Confirmation box's Asynchronous nature. I have tried to find the solution on many forums, but none of the solutions haven't given me a simpler way to deal with the below problem. Or may be I failed to understand that hints that were given.
Below is mycode:
var modalWindow = new Ext.Window({
id: 'modalWindow',
...
...
listeners: {
beforeclose: function ( window, eOpts ){
if ( dirtyCheck() ){
//perform abc()
// and don't close the modal window
return false;
}
else {
//perform xyz()
// close the modal window
return true;
}
},
close: function ( panel, eOpts ){
//will trigger beforeclose event to check if all is well
//refresh screen
}
},
buttons: [{
text: 'Close',
handler: function () {
modalWindow.close() // Same close() method is called when we click on window close ( X symbol ) tool.
}
}]
});
function dirtyCheck(){
// Code to check if dirty records exist
if ( /* Found dirty records */ ){
Ext.MessageBox.confirm('Please Confirm', 'Changes not saved. Do you want to close the window?', function (btn) {
if (btn === 'yes') {
console.log('*** clicked yes ****');
window.close();
}
});
}
}
Case Description: I have a grid and double clicking on a grid row opens a modal window coded above. I make some modifications on the modal window. If the user either clicks on the 'Close' button or the modal window close tool ( X symbol on top-right corner ) or even ESC button, I should prompt a confirmation messsage. If the user clicks on 'Yes', I should close the modal window else leave it open.
I have learnt that clicking on the X ( close tool ) or the ESC button fires a 'close' event which in turn fires 'beforeclose' and waits for true/false to either destroy the modal window or keep it open.
Problem: When the user clicks on X ( close tol ) or the ESC button, and while I debug, I see the control going to beforeclose and then the dirtyCheck() function that I wrote. The dirtyCheck function also displays a Message Confirmation box, but the control doesn't wait for me to click on Yes/No. It returns to beforeclose in the background and then to close. So, by the time user decides to click on either 'Yes' or 'No', ExtJS has decided what to do with the modal window and hence I am losing control on whether to close the modal window or not.
Could anyone please help me on what to do in such a case?
You might need to use window.destroy() to remove it after confirmation, your beforeClose function can be
beforeclose: function(window, eOpts) {
Ext.Msg.confirm('Please Confirm', 'Changes not saved. Do you want to close the window?', function(answer) {
if (answer == "yes") {
window.destroy();
}
});
return false;
}
Pass the window to your check function and close it once user have made a choice.
var modalWindow = new Ext.Window({
id: 'modalWindow',
...
...
listeners: {
beforeclose: function ( window, eOpts ){
dirtyCheck(window);
return false;
},
close: function ( panel, eOpts ){
//will trigger beforeclose event to check if all is well
//refresh screen
}
},
buttons: [{
text: 'Close',
handler: function () {
modalWindow.close() // Same close() method is called when we click on window close ( X symbol ) tool.
}
}]
});
function dirtyCheck(window){
// Code to check if dirty records exist
Ext.MessageBox.confirm('Please Confirm', 'Changes not saved. Do you want to close the window?', function (btn) {
confirmation = true;
if (btn === 'yes') {
console.log('*** clicked yes ****');
window.close();
}
});
}
BTW, you can use your way but then you will need to use native browser dialog, see confirm function http://www.w3schools.com/js/js_popup.asp

Hide/Show constrained Window

We are trying to prevent unnecessary rendering and therefor just want to hide and show a window containing a quite huge grid.
The window itself is constrained to the viewport by calling
App.Instance.getViewPort().add(scope.myWindowRef = Ext.create('Ext.Window'),{
constrainHeader: true
/* and the rest of the cfg */
});
scope.myWindowRef.on('close',function(win){ win.hide(); win.caller.enable(); return false; });
We have a button listeners inside the controller which should now show an hide window
onOpenWin: function(button) {
button.disable();
var scope = this,
win = scope.myWindowRef;
win.caller = button;
win.show();
}
You should use the beforeclose event when you want to stop the destruction of the window. The close event is already to late!
check out closeAction config - closeAction:'hide' should do..

appcelerator titanium - edit button in tabgroup doesn't go away

Using Titanium mobile sdk 1.7.2, I created a tabgroup with 11 tabs. The problem is when I open any of the tabs inside the 'more' tab, if the child window has a right navbar button, some times the 'edit' button of the 'more' tab doesn't go away..
my code is:
app.js:
var tabGroup=Titanium.UI.createTabGroup({top:20});
............
/** list of windows and tabs **/
............
var win9 = Titanium.UI.createWindow({
url:'discover.js',
title:'Discover',
navBarHidden:true,
barColor: navBarColor
});
var tab9 = Titanium.UI.createTab({
icon:'images/icons/Discover.png',
title:'Discover',
window:win9
});
discover.js:
win=Titanium.UI.currentWindow;
var btn=Titanium.UI.createButton({title:'Discover'});
btn.addEventListener('click',function (){
//do some stuff
});
win.rightNavButton=btn;
the problem is, sometimes when I open the 'tab9' which opens 'win9' my button (btn) doesn't appear, the 'edit' button of the 'more' is shown instead.
N.B: the click event listener works just fine, It is the 'edit' title that persists. Any one knows how to solve this?
thank you,
You need to set allowUserCustomization:false in your Tabgroup.
var tabGroup=Titanium.UI.createTabGroup({top:20,allowUserCustomization:false});
try to set
win.rightNavButton = null;
win.rightNavButton = btn;

Resources