How to open Ext.Panel onClick of a link

On 12.23.08, In Ext JS, JavaScript, Programming, by
Tags: , ,
Post Pic

Below script will lets you to open Ext.Panel (that is Panel) onClick of an anchor link. Its really a simple snippet and this will help developers those who are new to Ext JS. Mostly I will be posting these types of snippets as it helps people in learning some new and small tricks on how we can use respective method or event accordingly.

Before looking at the below code just download the respective Ext JS 2.2 SDK on your desktop and just download the below tutorial and save it to this location: ExtJS2.2\examples\panel this is because I have not changed the respective relative paths.

Live Preview | Download

HTML Code:
Below is the code were you need to place it in the

… Tag. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />


<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../../ext-all.js"></script>

<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<style type="text/css">
    .x-panel-body p {
        margin:10px;
    }
    #container {
        padding:10px;
    }
</style>

JavaScript Code:
JavaScript Code should be placed below this line

1

<script type="text/javascript" src="../../ext-all.js"></script>
 
1
2
3
4
5
6
7
8
9
10
11
12
13

Ext.onReady(function(){
        var mypanel = new Ext.Panel({
                title: 'My Panel',
                collapsible:true,
                width:500,
                html: Ext.example.bogusMarkup
        });
        var myButton = Ext.get('myHrefIdClick');
                myButton.on('click', function(){
                        //render the panel to id -> 'container'
                        mypanel.render('container'); 
        });
}); //onReady Close

Below code should be placed in

… tag: 

1
2
3
4
5

<script type="text/javascript" src="../shared/examples.js"></script>
<h1>onClick of a link opens up a Panel</h1>
<a href="#" id="myHrefIdClick">Click Here</a>
<div id="container">
</div>

If you would like to view the preview, you can click the below link:
Live Preview | Download

Related Entries...

admin

Visit Authors Website  |  All Articles From This Author

You Might Like:

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]

One Response

Fahad
12.23.08

Its not working for me in Firefox when i click i doesn’t do anything.

Leave Your Response