Including a cancel button to close the open window

var messagebox = Ext.widget("messagebox", {
  target: grid,
  progressMessage: "Loading"
});

The message box displayed above indicates the loading progress bar that appears when the download button is clicked. I am looking to incorporate a cancel button in order to stop the execution of the popup window below. Could someone assist me with this cancellation process?

var win = new Ext.Window({
  title: "popup",
  width: 50,
  height: 50,
  layout: "fit",
  items: [
    {
      xtype: "component",
      autoEl: {
        tag: "popup",
        src: "www.google.com"
      }
    }
  ],
  listeners: {
    show: function() {
      setTimeout(function() {
        popup.close();
      }, 2000);
    }
  }
}).show();

Answer №1

What do you think of using: win.close()

let window = new Ext.Window({
  title: "modal",
  // more code here
}).show();

button.addEventListener("click", () => {
  window.close()
})

Answer №2

When creating a window with the closable configuration setting:

const win = new Ext.Window({
  title: "popup",
  closable: true
  // ...
});

It's important to consider the closeAction configuration as well, which can have values of either close or hide. The former will completely destroy the window, while the latter will simply hide it from view without removing the component.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Cookies within an HTML Page

My current code is functioning perfectly, accurately calculating the yearly income based on the input "textmoney." I have a link to a more advanced calculator for a precise prediction. My goal is to find a way for the website to retain the data input from ...

The issue of memory leakage caused by jQuery Ajax requests

A problem has arisen on my website where memory is being leaked in both IE8 and Firefox. The Windows Process Explorer shows a continuous growth in memory usage over time. The issue arises when the page requests the "unplanned.json" URL, which is a static ...

How can I modify the color of a div when a validation error occurs?

I have recently completed a contact form with validation using the constraint validation api. Although the files are functioning as intended, I am curious if there is a method to make the error boxes turn red when an error occurs and white (or hidden) when ...

Issue with dynamic dropdown selection causing element to not display

My code is designed to call the addpoc() method on button click, which generates a set of input boxes and a dropdown. When the dropdown option personal/workmail is selected, an input box should appear based on the selection. The issue arises after the init ...

Chrome does not support top.frames functionality

I have three HTML pages: main.html, page1.html, and page2.html. I am displaying page1.html and page2.html within main.html using the code below. <!DOCTYPE html> <html> <frameset frameborder="1" rows="50%, *"> <frame name="f ...

Interactive image sliders in a Netflix-inspired style with live previews on hover, fully compatible with Bootstrap framework

I'm looking for suggestions on Twitter Bootstrap compatible jquery plugins that can create a Netflix-style continuously scrolling image carousel with mouse-over functionality. I've tried the carousel included in the Bootstrap JS library, but it r ...

Automatically numbering table columns with custom language localization in JavaScript using Jquery

Is there a method to automatically number table data in a local or custom language? As a Bengali individual, I have figured out how to automatically number the first data of each row using css and js. However, I am uncertain about how to implement custom n ...

Images obscure dropdown menu

The issue I am experiencing with my blog is that the dropdown menu is appearing behind the image slider on the main page. You can see it here: Can anyone offer guidance on how to prevent this from happening so that the dropdown menu is not obscured? Just ...

Creating a universal header for all webpages in Angular JS by dynamically adding elements using JavaScript DOM manipulation techniques

I have successfully created a json File containing an array of "learnobjects", each including an id, name, and link. Check out my plnkr example var myMessage = { "learnobjects": [{ "id": "1", "name": "Animation-Basics", "link": "animation_bas ...

Creating an MPG4 Video from a Three.js Scene: What Are the Steps?

I am working with a three.js scene that includes numerous animated objects. I am looking to export this animation as an mpg4 video. Here are my questions: What is the best method for exporting a scene to create an mpg4 video? Is it recommended to perfo ...

Prevent animations on child elements with Vue.js

I am dealing with a scenario where I want to remove the fade transition on a child div within a <transition> component. The reason for nesting it is to prevent layout flickering, which can be demonstrated in a fiddle if necessary. In the fiddle belo ...

Retrieve a specified quantity of JSON data from an external API

Dealing with a recently received API from an external source: (please note: the data returned is extensive) I'm aware that I can retrieve this large object by using the following method: $.getJSON('https://www.saferproducts.gov/RestWebServices ...

Getting data from a document containing key value pairs

I have a collection of text files that are structured in a key-value pair format. "Site Code": "LEYB" "Also known as": "" "Location": "Pier Site, Poblacion del Sur, Villaba, Southern Leyte" "Contact person(s)": "" "Coordinates[1]": "11 ...

JQuery ajax fails to trigger the success function

Upon using an ajax request to insert data into the database, I encountered an issue where the button message did not update after the submission was successful. Initially, I set the button text to Please wait... upon click, and intended to change it to Don ...

using async.waterfall with async.apply

Here is a code snippet that I am working with: async.waterfall([ // Read directory async.apply(fs.readdir, '../testdata'), // Load data from each file function(files, callback) { async.each(files, loadDataFromFile, callback); } ], ...

Eclipse - enhancing outline view by utilizing require.js define(...)

My code is structured within the define(...) function in the following format: define(['angular'], function(angular) { function foo () { console.log("Hi") ; } function foo2 () { console.log("Hi") ...

The act of splicing an array in React causes continuous rerendering

Within the update(changeProps) function, my code resembles the following: update(changedProps) { if (this.person) { this.__arr = ['hi', 'hi', 'hi']; } else { this.__arr = ['bye', &apos ...

Issue with ExtJS causing store to not load properly

I have been working on this issue for over a week now and cannot seem to get it resolved. The webservice is returning data, which I can see, but the store is not loading it correctly. The only time I managed to display the entire response in the grid was w ...

Route parameter in JavaScript: only accept numerical values

Is it possible to restrict parameter types to only accept digits? If a letter or other character is inputted, I want to fallback to a default scenario. Below are the two attempts I've made. app.get('/multi/:num?', function (request, respons ...

Query modifier contains an unexpected token ":"

For my API project, I have opted to use sailsjs as my framework. The documentation at provides a list of query modifiers that can be used. User.find({ or: [ name: { startsWith: 'thelas' }, email: { startsWith: 'thelas' } ] ...