Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Defining Windows

Page of 168

Ext JS 4 Window components (Ext.window.Window), are floating, resizable, and draggable panels. A Window may be constrained to a parent container, restricting the user from being able to drag it outside of its parent.

Commonly used configuration properties include the following:

Config Property Description
autoShow Boolean. Windows are not shown to the user by default when they are instantiated. Setting this property to true causes the Window to appear as soon as it has been instantiated.
closable Boolean. True to allow the user to close the window by pressing a button on the Window's header.
closeAction String. The action to take when the close button is clicked. The default behavior is 'destroy' which removes the window from the DOM and destroys any nested items. You can override this by specifying 'hide' which simply changes the visibility of the window.
collapsible Boolean. True to make the panel collapsible and have an expand/collapse toggle Tool added into the header tool button area.
constrain Boolean. True to constrain a Window's movement to its container.
maximizable Boolean. True to allow the user to automatically expand the window to the size of its container by clicking on the 'maximize' tool button that is added to the header.
minimizable Boolean. True to allow the user to automatically shrink the window to the size of its panel header by clicking on the 'minimize' tool button that is added to the header.
x Integer. The x-coordinate of the top-left corner of the window, relative to its container.
y Integer. The y-coordinate of the top-left corner of the Window, relative to its container.

The following code snippet illustrates extending the Ext.window.Window component:

Ext.define('MyApp.view.ContentWindow', {
 extend: 'Ext.window.Window',
 alias: 'widget.contentwindow',
 
 autoShow: true,
 height: 600,
 width: 472,
 layout: {
   type: 'fit'
 },
 closable: false,
 constrain: true,
 maximizable: true,
 minimizable: true,
 html: 'This is a content window'
});

You can dynamically instantiate window instances as constrained children of a container as illustrated below:

Dynamically instantiating windows
// get parent container reference
var myContainer=Ext.ComponentQuery.query('#centerregion')[0];

// instantiate windows as children of the container
myContainer.add(
 { 
   xtype: 'contentwindow',
   x:5,
   y:20,
   height:375,
   title: 'win1'
 },
 { 
   xtype: 'contentwindow',
   x: 500, 
   y: 20, 
   height: 200, 
   title: 'win2'
 },
 { 
   xtype: 'contentwindow', 
   x:500, 
   y: 300, 
   height: 100, 
   title: 'win3'
 }
);
Page of 168
comments powered by Disqus