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

Post Pic

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
<div id="divWindowId" class="x-hidden" style="padding:10px">
<p>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.</p>
<p>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.</p>
	    <input type="button" value="Close" onClick="hideWindow();"/>
<br/>
</div>

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
<script language="javascript">
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
}
</script>

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

Related Entries...

Advertisement

Please let us know your feedback about the article through the comments section below, we want to hear from you about our website. And your comment / advice may help us to serve you better in upcoming articles.

Thank You!
Vivekanand [Founder of DeveloperSnippets]

5 Responses

07.08.09

Best article to refer thanks

[...] View More [...]

07.08.09

Described java script code is really helpful for new comers. thanks guys.

07.08.09

Hi Aswini,

Thanks for this one..

Thanks,
Vivek

07.08.09

Nice Article … I was looking for such article…. Great Article

Leave Your Response

* Name, Email, Comment are Required