Onclick of a link open respective Accordion Panel

Google+ Pinterest LinkedIn Tumblr +

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.

HTML Code:

OnClick of a link open respective Accordion Panel

html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}

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

Ext.onReady ( function ( ) {
var win = new Ext.Window ( {
renderTo: document.body ,
title: Ext.get ( ‘page-title’ ) .dom
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

Place the below HTML code in Body Tag:

1
Developer Snippets | Tech Video Bytes

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
Developer Snippets | Tech Video Bytes

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

Live Preview | Download

Enjoy Coding and Enjoy Holidays!

Share.

About Author

Leave A Reply