Blog

Resources

Before you start with this tutorial you need to download the resources, this time you’ll see only a HTML document that includes the Ext JS library and an empty JS file.

Packaging

“Packaging” the code is a very good practice when we’re developing an application, we have talked about the reasons of doing it before.

//the namespace for this tutorial
Ext.ns('com.quizzpot.tutorial');

//the blank image
Ext.BLANK_IMAGE_URL = '../ext-2.2/resources/images/default/s.gif';

com.quizzpot.tutorial.Window = {
	init: function(){
		//code goes here
	}
}

Ext.onReady(com.quizzpot.tutorial.Window.init,com.quizzpot.tutorial.Window);

We will write the rest of the code inside of the function “init”, by doing this we will avoid future problems.

A basic window

The component “Ext.Window” inherits the methods and properties from the component “Ext.Panel”, this means that all the properties we use for the panels can be used in windows too, besides we can use some of other properties that can only be used in the component Window. To create a window we only need 3 configuration properties: the title, width and height.

var win = new Ext.Window({
	title: 'First window!', //the title of the window
	width: 300,
	height:250
});
//displaying the window to the user
win.show();

The previous code shows how to create a very basic window, just remember that once we have create an instance of the component “Window” we need to invoke the method “show” to display the window in the screen.

Other configurations

By default the windows are displayed in the middle of the screen but we can modify their position by specifying the property x,y; also we can make the window modal, which makes the background to look like it’s covered with a transparent gray layer allowing the user to pay the attention only to that window. We can also use the properties minimizable and maximizable.

var win = new Ext.Window({
	title: 'First window!',
	width: 300,
	height:250,
	minimizable: true, //show the minimize button
	maximizable: true, //show the maximize button
	modal: true, //set the Window to modal
	x: 100, //specify the left value of the window
	y: 100 //specify the top value of the window
});
//display the window in the screen
win.show();

Minimize a window

It’s important to remember that we need to implement the functionality of the button minimize, because the windows don’t have this defined by default; this gives us the opportunity to implement the functionality according to our needs, so let’s start doing it by adding a “listener” to the event “minimize” like this:

var win = new Ext.Window({
   title: 'Quizzpot.com',
   width: 500,
   height:350,
   minimizable: true,
   maximizable: true,
   html: ''
});
win.show();

//fire when the user clicks the minimize button
win.on('minimize',function(w){
   console.debug('minimizing...');
   w.collapse(); //collapse the window
});

The previous code creates a “listener” that will be triggered when the user clicks on the button minimize of the window, in this moment the function we defined will be called and the window is collapsed; just keep in mind that every developer decides what is going to happen in this function.

Content

To assign the content of the window we do the same thing we did for the panels:

• Use the property “html” and writing the HTML directly.
• Use the property “contentEl” we’ve asssigned the ID of an element of the DOM in order to be the content of the window
• Use the property “autoLoad” or the method “load” to load the content using Ajax.
• Use the property “items” and assigning an array of Ext JS components.

We have studied the previous configurations before, so I recommend you to read the previous tutorial in case you have some questions.

Loading external sites

If we need to display an external site like Google or Yahoo, we can use an iFrame to load the site. To do this we need to use the property “html” like this:

var win = new Ext.Window({
	title: 'First window!',
	width: 500,
	height:350,
	minimizable: true,
	maximizable: true,
	html: '<iframe src="http://www.quizzpot.com" style="width:100%;height:100%;border:none;"></iframe>'
});

var win2 = new Ext.Window({
	title: 'First window!',
	width: 500,
	height:350,
	minimizable: true,
	maximizable: true,
	html: '<iframe src="http://www.google.com" style="width:100%;height:100%;border:none;"></iframe>'
});

win.show();
win2.show();

Conclusions

In this tutorial you can see how to use the inheritance correctly, because a window is actually a panel with more functionalities like Drag, maximize and minimize buttons, also the window has the same methods of the panel to assign content.

If you have any questions or suggestion please leave us a comment, also I invite to join our Forum to share your knowledge with the new community.