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

On 07.08.09, In Ext JS, JavaScript, by admin

Tags: Ext JS, JavaScript

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

<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

<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

Articles which you would like to read:

Related Entries...

How to create nested tabs panel using ExtJS

I think everybody those who are in web development environment or those who are in the other areas of ...
How to open Ext.Panel onClick of a link

Below script will lets you to open Ext.Panel (that is Panel) onClick of an anchor link. Its really a ...
Onclick of a link open respective Accordion Panel

Hi guys! I am back with some useful stuff after my Christmas holidays, in this article you can learn ...
Cross-Browser Snippet for finding the size of the browser window using JavaScript

To start with, Well I think bunch of developers might have come across this situations where in which ...
Open e-mail message window onclick of a button using JavaScript

This is a simple cross-browser snippet to open an e-mail message window onclick of a button using Jav ...
Cross-Browser Snippet for Bookmarking the webpage

Below is the code which is written in JavaScript, we can use this script for bookmarking the particul ...
Difference between $(document).ready(function(){}); and $(window).load(function(){});

When I have started learning I was bit confused about what is the difference between $(document).read ...
How To: Make Tabs Reload and Evaluate Scripts using ExtJS

Introduction: When I was working on Ext JS Tab Panels, I was strucked at one position like, let me e ...
Simple Bookmark Script using jQuery

Introduction: Below is the simple Bookmark script, which has been implemented using jQuery, this mig ...
Date Range using ExtJS Date Field and Advanced VType

Introduction: Date Ranging is simple using ExtJS DateField. Yes! When I was working for one of my pr ...