PDA

View Full Version : How do I show a hidden panel with the click of an anchor tag?



4carlosanderson
4 Sep 2011, 1:21 AM
I am building an accordion with an unordered list of thumbnail images and text inside each section. I would like to add anchor tags to the images which will open (full-screen) a hidden panel associated with that particular image; and subsequently be able to either close the new panel or cycle through (with a carousel) each of the panels associated with the items on the unordered list.

Can anyone help me out with some code samples or links to relevant references? Your help will be much appreciated.

Thanks,
Carlos

skirtle
4 Sep 2011, 3:45 PM
I assume this is a Sencha Touch question? If so, please post in the Touch forum.

Any reason why you want to use anchor tags rather than just adding an element click listener?

4carlosanderson
4 Sep 2011, 8:53 PM
As I mentioned in my other post, I am a complete newbie so I didn't accurately phrase my question. I am actually more interested in the Ext JS 4 functionality. As far a your question about adding an element click listener is concerned, you are correct, this would be a far more logical solution. I guess I just need some overall tips and guidance so I can get a better understanding of how Ext JS 4 works.

Thanks,
Carlos

skirtle
5 Sep 2011, 2:23 AM
Something to get you started:


Ext.onReady(function() {
Ext.create('Ext.Component', {
height: 300,
renderTo: Ext.getBody(),
width: 300,
autoEl: {
children: [
{tag: 'img', src: 'example.png'},
{tag: 'img', src: 'example.png'},
{tag: 'img', src: 'example.png'},
{tag: 'img', src: 'example.png'},
{tag: 'img', src: 'example.png'},
{tag: 'img', src: 'example.png'}
]
},
listeners: {
afterrender: function(cmp) {
cmp.mon(cmp.getEl(), 'click', function(ev, img) {
if (img) {
var imgs = cmp.getEl().query('img');
var index = imgs.indexOf(img);

Ext.create('Ext.window.Window', {
autoShow: true,
html: 'Image clicked: ' + index,
maximized: true,
title: 'Window'
});
}
}, null, {delegate: 'img'});
}
}
});
});

You'll find that concepts like Carousel and fullscreen don't really carry over to ExtJS. Desktop browsers are different from mobile browsers and the libraries reflect that.