Onclick of a link open respective Accordion Panel

On 12.30.08, In Ext JS, JavaScript, by
Tags: ,
Post Pic

Hi guys! I am back with some useful stuff after my Christmas holidays, in this article you can learn how can we enable/show/open respective Accordion Panel onclick of a link that ‘anchor link’. Snippet is simple just copy and paste the same to get the same results or else you can download the same from the link provided and enjoy your coding standards in ExtJS.

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\layout this is because I have not changed the respective relative paths.

Live Preview | Download

HTML Code:

<title id="page-title">OnClick of a link open respective Accordion Panel</title>
<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>
<style type="text/css">
        html, body {
            font: normal 12px verdana;
            margin: 0;
            padding: 0;
            border: 0 none;
            overflow: hidden;
            height: 100%;
        }
</style>

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<script type="text/javascript">
                Ext.onReady(function() {
                        var win = new Ext.Window({
                                renderTo: document.body,
                                title:Ext.get('page-title').dom.innerHTML,
                                width:450,
                                height:380,
                                plain:true,
                                layout:'accordion',
                                border:false,
                                closable:false,
                                items:[{
                                        title:'Tech Video Bytes',
                                        id:'techvideopanel',
                                        bodyStyle:'padding:10px',
                                        html:'
Want to explore your choice of video from all over world at once place! then what are you waiting for, just click, explore and learn.. Tech Video Bytes

Through videos you can Learn Photoshop, Flash, Adobe AIR, ExtJS, jQuery, Ajax, Dojo, HTML, CSS, JavaScript, XML, Accessibility, Database, DWR, Gears, GWT, Java, JSON, MooTools, Office, Perl, PHP, Programming, Prototype, Scriptaculous and more...
'
                                },{
                                        title:'Developer Snippets',
                                        id:'devpanel',
                                        bodyStyle:'padding:10px',
                                        html:'
Here is the place where you can learn Photoshop, Flash, Adobe AIR, ExtJS, jQuery, Ajax, Dojo, HTML, CSS, JavaScript, XML, Accessibility, Database, DWR, Gears, GWT, Java, JSON, MooTools, Office, Perl, PHP, Programming, Prototype, Scriptaculous and more.... at Developer Snippets

As the site name depicts, this site is fully related to developers who are starting their career and who want to develop there career in developing some good innovative things. This site not only posts about present technologies and even posts some past development technologies. I am striving hard to give up something useful info to the developers who want to learn online without going to the outside world, the developers can learn some innovative things by sitting and browsing through this site.

In the long way run, I will deliver the best to the developers who really wish to surge ahead in life on their own without any support from others. So folks rock up your life with your own thoughts and ideas. I look forward to seeing a change in everybody’s life in the years to come.
'
                                },{
                                        title:'JavaScript',
                                        id:'javascriptpanel',
                                        bodyStyle:'padding:10px',
                                        html:'JavaScript loveable language'
                                },{
                                        title:'CSS Styles',
                                        id:'csspanel',
                                        bodyStyle:'padding:10px',
                                        html:'Style'
                                }]
                        });
win.show();
 
//adding an event listener to a ahref tag                     
Ext.EventManager.addListener("devsnippets", 'click', function(){
        Ext.getCmp('devpanel').expand();
}, this, { preventDefault: true } );
 
//adding an event listener to a ahref tag                     
Ext.EventManager.addListener("techvideo", 'click', function(){
        Ext.getCmp('techvideopanel').expand();
}, this, { preventDefault: true } );
 
});// end of function onready
script>

Place the below HTML code in Body Tag:

1

<div style="margin-top:100px; text-align:center;"><a href="#" id="devsnippets">Developer Snippets</a> | <a href="#" id="techvideo">Tech Video Bytes</a></div>

Updated Code on 2-Dec-2009:
Viewers, if there are more than one link, then firstly add similar ‘class’ to all the respective links, like earlier I have not added the ‘class’ attribute to the respective links. Below is the HTML code for the same

1

<div style="margin-top:100px; text-align:center;"><a href="#" id="devsnippets" class="ahreflinks">Developer Snippets</a> | <a href="#" id="techvideo" class="ahreflinks">Tech Video Bytes</a></div>

And I have changed the id’s of ‘devpanel’ to ‘devsnippetspanel’ in the JavaScript Code, then in the place of adding Listeners for each link, you can replace the same with the below code:

1
2
3

Ext.select('.ahreflinks').on('click', function(e) {
    Ext.getCmp(e.target.id+"panel").expand();
});

I have updated the respective code in the download and preview versions, please do have a look at it.

Live Preview | Download

The above code helps us a lot in the case of performance. And I would like to say thanks to ‘Claude’ for his valuable comment.

OnClick of a link open respective Accordion Panel

OnClick of a link open respective Accordion Panel

Live Preview | Download

Enjoy Coding and Enjoy Holidays!

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]

3 Responses

Onclick of a link open respective Accordion Panel | Graphic design blog articles
12.30.08

[...] View original post here: Onclick of a link open respective Accordion Panel [...]

Claude
12.30.08

It’s performance intensive to attach handlers for each link. Instead you should either give all links the same class, and attach a listener to the composite element returned by Ext.select(‘.myClass’); or attach a listener to the overall container and then examining whether the click event was fired by the links classed ‘myClass’.

In both scenarios you would continue to use IDs to determine the action, for example, using Ext.getCmp(e.target.id + ‘panel’).expand(); would expand any accordion panel as long as the link ID and the corresponding panel id used the same naming convention.

Adding listeners to a containing DIV is also very efficient when you begin to add and remove links to it since there is no need to bind new ones or unbind the old ones.

HTH

admin
12.30.08

Hi Claude,

Firstly, I would like to say thanks for going through the code, yeah you are right “it is a performance intensive to attach handlers for each link”. I do agree with you, this post is just to know on how we can add listeners to the respective id’s. And even I want to showcase the snippet in the case were if there are more than one link.

Viewers here is the code:
—————–
Ext.select(‘.ahreflinks’).on(‘click’, function(e) {
Ext.getCmp(e.target.id+”panel”).expand();
});
—————–
I would like to highlight this code in the article, as ‘Claude’ suggested. I will be adding the code in the bottom of the article, so that Viewers who are new to ExtJS might can understand on how productively we can make use of the concepts which has there in ExtJS.

Thanks,
Vivek

Leave Your Response