Show or Hide of Ext.Window panel, with close button inside

Google+ Pinterest LinkedIn Tumblr +

Introduction

Below is the simple snippet which allows us to show or hide the Ext.Window panel, on button or link click it will show the Window panel and on button or link click it hides the Window panel accordingly, the respective Window is a modal Window. This is a simple and basic snippet which all beginners can understand easily.

Preview / Download:

If you would like to see the working example, please do click here. And if you would like to download the snippet, click here

HTML Code

1
2
3
4
5
6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a vestibulum sem. In a elit ipsum, at cursus enim. Nullam non dui tellus, vitae vestibulum tortor. Aliquam gravida tellus lorem, quis consectetur quam. Donec mollis auctor nunc eget scelerisque.

Vivamus dignissim diam in ligula semper vestibulum. Aenean luctus nisi in metus ultrices eu congue odio sodales. Aenean volutpat viverra est, at feugiat libero commodo ut. Maecenas at quam eget libero feugiat ullamcorper quis placerat ligula. Aliquam et tortor vitae enim viverra faucibus.

JavaScript Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var winPanel = Ext.getCmp(‘panelWindowId’);
if(!winPanel){
winPanel = new Ext.Window({
title: ‘Sample Window’, //Title of the Window
id: ‘panelWindowId’, //ID of the Window Panel
autoHeight: true, //Height of the Window will be auto
width:300, //Width of the Window
resizable: false, //Resize of the Window, if false – it cannot be resized
closable: false, //Hide close button of the Window
modal: true, //When modal:true it make the window modal and mask everything behind it when displayed
contentEl: ‘divWindowId’ //ID of the respective ‘div’
});
}
 
function showWindow()
{
winPanel.show();
//show method has got three optional parameters like animateTarget, callback, Object scope
}
 
function hideWindow()
{
Ext.getCmp(‘panelWindowId’).hide();
//Even this hide methof has got same three optional parameters like animateTarget, callback, Object scope
//getCmp method is to retrieve the reference to the component
}

Preview / Download:

If you would like to see the working example, please do click here. And if you would like to download the snippet, click here

Articles which you would like to read:

Share.

About Author

Leave A Reply