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:
<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"/> <!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <!-- ENDLIBS --> <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:'<p>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.. <a href="http://www.developersnippets.com/techvideobytes" title="Tech Video Bytes">Tech Video Bytes</a></p><br/><p>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...</p>' },{ title:'Developer Snippets', id:'devpanel', bodyStyle:'padding:10px', html:'<p>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 <a href="http://www.developersnippets.com" title="Developer Snippets">Developer Snippets</a></p><br/><p>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.</p><br/><p>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.</p>' },{ 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.
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.
Enjoy Coding and Enjoy Holidays!
Related Entries...
Below script will lets you to open Ext.Panel (that is Panel) onClick of an anchor link. Its really a ...
Introduction Below is the simple snippet which allows us to show or hide the Ext.Window panel, on bu ...
Introduction: When I was working on Ext JS Tab Panels, I was strucked at one position like, let me e ...
I think everybody those who are in web development environment or those who are in the other areas of ...
Introduction: Date Ranging is simple using ExtJS DateField. Yes! When I was working for one of my pr ...
As we all know AJAX is rocking the Web World all around, just I had a thought to developer a simple A ...
Introduction: Below is the simple Bookmark script, which has been implemented using jQuery, this mig ...
Introduction: After going through this article, you can be able to develop a simple slide panel appl ...
I am back again with some good snippet on "Placing a Play Icon over the image using CSS", After going ...
Introduction This post help beginners to learn and implement some jQuery Web Applications. Develop S ...























3 Responses
[...] View original post here: Onclick of a link open respective Accordion Panel [...]
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
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