The panel is a very basic component of the Ext JS Framework, especially because a lot of components inherit from it, that's why is important to understand it and learn its functionality.

Resources

Before we begin this tutorial you need to download the resources, unzip them and copy the files to the Web server we installed in the first chapter of this course, inside of the folder "course", so create a folder named "panels" and place the resources there.

What is a Panel?

A panel is a container that has specific functionality and structural components that make it the perfect building block for application-oriented user interfaces. We can add toolbars, buttons at the bottom or make the panel collapsible. The panels can be assign easily to another container.

Create the first panel

Is very easy to create a panel, all you need to do is write the following code:

var main = new Ext.Panel({
	title: 'My first panel', //panel's title
	width:250, //panel's width
	height:300, //panel's height
	renderTo: 'frame', //the element where the panel is going to be inserted
	html: 'Nothing important just dummy text' //panel's content
});

The previous code creates a panel with the title "My first panel", with the dimensions of 250 x 300 pixels, this panel will be inserted inside the element "frame" that we have in the HTML document, the content has the text "Nothing important just dummy text." The most important part in the previous code is the property "renderTo", this property accepts the "id" from the node in the DOM where the new panel is going to be inserted. In the following example we have an alternative, in case we need to render the panel in some other time.

var main = new Ext.Panel({
	title: 'My first panel',
	width:250,
	height:300,
	html: 'Nothing important just dummy text'
});
//we use the method "render" to display the panel in the screen
main.render('frame');  

As you can see, the object "Panel" has a method capable to render or insert the HTML we need so the user can look at the panel in the screen, this method is called "render" and accepts as a parameter the "id" of the node where the panel is going to be inserted.

Panel's content

The content of a panel can be assigned in four different ways, we have seen one of them in the previous codes, by using the property "html" we can specify the content we need to add. The second option we have is defining with the property "contentEl" the "id" of the element we need to in the panel, is necessary to have this element already in the DOM so it can be inserted in the panel. Let's remove the comment of the HTML document we have in the resources, after doing that you need to write the following code:

var main = new Ext.Panel({
	title: 'My first panel',
	width:250,
	height:300,
	contentEl: 'content' //using an element from the DOM as the content
});
main.render('frame'); 

The third option consists of requesting the content to the server with Ajax and insert the response inside of the panel, it's important to remember that the server must send HTML code so this can be render correctly in the browser.

var main = new Ext.Panel({
	title: 'My first panel',
	width:250,
	height:300
});
main.render('frame'); 
//using Ajax to insert the content
main.load('panel.php'); 

We can also use the property "autoLoad", in this way when we create the instance automatically the content will be requested through Ajax.

var main = new Ext.Panel({
	title: 'Mi primer panel',
	width:250,
	height:300,
	autoLoad: 'panel.php' //<--- The content will be retrieve from here automatically
});
main.render('frame'); 

The fourth option is to insert other Ext JS components, it can be Panels, Tabs, trees, forms, etc. Before we do this we need to create the component we will need to add and then add it with the property "items", which is an array of components.

//creating the inner panel
var panel1 = new Ext.Panel({
	title: 'Users',
	html: 'The content',
	bodyStyle: 'padding:10px;', //we can assign styles to the main div
	height:200,
	border: false //we can remove the border of the panel
});
	
//this the main panel that will have other panels inside
var main = new Ext.Panel({
	title: 'My first panel',
	width:250,
	height:600,
	items: [panel1] //assigning the components
});
//rendering all the created panels
main.render('frame'); 

In the previous code we created a panel and inserted another panel inside, this is very common when we develop layouts with Ext JS. It's important to remember that we we call the method "render" in the main panel, all the components the panels has will be rendered automatically.

Collapsing panels

One of the characteristics of the panels is that they can be collapsed by clicking in a button displayed at the right upper side of the panel, all we need to do is to set to "true" the property "collapsible".

//creating the inner panel
var panel1 = new Ext.Panel({
	title: 'Users',
	html: 'The content',
	bodyStyle: 'padding:10px;',
	height:200,
	border: false,
	collapsible: true //we use this property to collapse the panel
});
	
//… we don't need to show the rest of the code, since we didn't change anything there.

We can also make the panel collapsible by clicking on any part of the panel's title, we can do this by setting to "true" the property "titleCollapse" like this:

//creating the inner panel
var panel1 = new Ext.Panel({
	title: 'Users',
	html: 'The content,
	bodyStyle: 'padding:10px;',
	height:200,
	border: false,
	collapsible: true,
	titleCollapse: true  //now the panel will collapse when we click on the title
});
	
//… we don't need to show the rest of the code, since we didn't change anything there.

Adding an icon in the panel's title

There may be times that we need to add icons in the title's bar to improve the "look and feel" of the application, all we need to do is define a CSS class that will place the image (icon) as a background.

.users{
	background: url(icons/users.png) 0px 0px no-repeat !important;
}

Once we have defined the CSS class, we need to assigned this class to the panel with the property "iconCls" like this:

//creating the inner panel
var panel1 = new Ext.Panel({
	title: 'Users',
	html: 'The content',
	bodyStyle: 'padding:10px;',
	height:200,
	border: false,
	collapsible: true,
	titleCollapse: true, 
	iconCls: 'users'  //this will add the icon we defined in the CSS class
});
	
//... we don't need to show the rest of the code, since we didn't change anything there.

The property “defaults”

Let's create two more panels exactly the same as the previous panel, we will only change the title and the icon.

var panel1 = new Ext.Panel({
	title: 'Users',
	iconCls: 'users',
collapsible:true,
	border: false,
	bodyStyle: 'padding:10px;',
	titleCollapse: true,
	height:200
});

var panel2 = new Ext.Panel({
	title: 'Reports',
	iconCls: 'reports',
collapsible:true,
	border: false,
	bodyStyle: 'padding:10px;',
	titleCollapse: true,
	height:200
});

var panel3 = new Ext.Panel({
	title: 'Documents',
	iconCls: 'documents',
collapsible:true,
	border: false,
	bodyStyle: 'padding:10px;',
	titleCollapse: true,
	height:200
});

var main = new Ext.Panel({
	title: 'My first panel',
	width:250,
	height:600,
	items: [panel1,panel2,panel3]
});
main.render('frame');	

Maybe you have noticed already that there's a bunch of code we repeat when we create the first three panels, especially five properties. Ext JS allow us to define properties by default for the components that will use the same properties, in this way we can avoid writing the same code every time. With the property "defaults" we can define the properties we want to be applied on the components that the parent component has.

var panel1 = new Ext.Panel({
	title: 'Users',
	iconCls: 'users'
});
var panel2 = new Ext.Panel({
	title: 'Reports',
	iconCls: 'reports'
});
var panel3 = new Ext.Panel({
	title: 'Documents',
	iconCls: 'documents'
});
		
var main = new Ext.Panel({
	title: 'My first panel',
	width:250,
	height:600,
	defaults: { // with this property we avoid...
		collapsible:true, //code duplicity...
		border: false, // and all that...
		bodyStyle: 'padding:10px;', // properties...
		titleCollapse: true, // will be added to...
		height:200 //all the inner panels
	},
	items: [panel1,panel2,panel3]
});
main.render('frame');

Loading the information

We have seen how to load the content of the panels using Ajax, what we're going to do now is to pass parameters so we can receive the correct information, to do this we need to pass to the method "load" an object with the "url", the method we're going to use and the parameters we will need.

panel1.load({
	url: 'panel.php',
	method: 'GET',
	params: {data:'users'}
});
panel2.load({
	url: 'panel.php',
	method: 'GET',
	params: {data:'report'}
});
panel3.load({
	url: 'panel.php',
	method: 'GET',
	params: {data:'documents'}
});

All the requests are made to the same PHP file, which receives a parameter and depending on its content, it will return the correct information.

Conclusions

In this tutorial we learned how to use the component Panel, also we saw some of the most common properties and methods, so I recommend you to read the API and play a bit more with this component. If you have any suggestions or questions please leave a comment or subscribe to the Forums and I will gladly answer you as soon as I can.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Learning Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!