View Full Version : Setting up hyperlink images in a panel

2 Sep 2011, 12:38 AM

I have been looking everywhere within the forums to find some example of how to place multiple images within a card layout panel. I would like to use this images to switch to other pages within the card layout. However I don't want to use a tool bar to do it, at least on the first page of the card layout. I have 6 images, each when clicked will switch the card layout to the associated card. However there are no examples anywhere of how to add images in a 2x3 grid.

Any help would be greatly appreciated.

3 Sep 2011, 1:33 PM
How do you want the sizes of the 6 images to be determined? Is the region containing the card layout a fixed size? How will users interact with the 6 images?

I see a few ways to do this depending on the answers to the questions above.

Firstly, you could do it all with HTML and CSS. The autoEl config option of the first card would be one place to do it this way.

Next option is to use an Absolute layout. This should make things easy if everything is a fixed size.

Third option, nested VBox and HBox. Gives lot of sizing flexibility but at the expense of complexity.

Using a View is also a possibility.


3 Sep 2011, 3:21 PM
The 6 images are a fixed size based on their actually size. The user will click the image, like desktop icons, and they will display the correct card for the image that was clicked.

What would be an example of using the autoEl option?

3 Sep 2011, 4:29 PM
Here's one way of using it:

.img-index {
position: relative;

.img-index img {
position: absolute;

.row1 {
top: 0;

.row2 {
top: 40px;

.col1 {
left: 0;

.col2 {
left: 40px;

.col3 {
left: 80px;

Ext.create('Ext.panel.Panel', {
height: 300,
layout: 'card',
renderTo: Ext.getBody(),
width: 300,
items: [
cls: 'img-index',
xtype: 'component',
autoEl: {
children: [
{tag: 'img', src: 'example1.png', cls: 'row1 col1'},
{tag: 'img', src: 'example2.png', cls: 'row1 col2'},
{tag: 'img', src: 'example3.png', cls: 'row1 col3'},
{tag: 'img', src: 'example4.png', cls: 'row2 col1'},
{tag: 'img', src: 'example5.png', cls: 'row2 col2'},
{tag: 'img', src: 'example6.png', cls: 'row2 col3'}
listeners: {
afterrender: function(cmp) {
cmp.mon(cmp.getEl(), 'click', function(ev, img) {
if (img) {
var matches = img.getAttribute('class').match(/row(\d).*col(\d)/);

alert('row: ' + matches[1] + ', column ' + matches[2]);
}, null, {delegate: 'img'});

In this case I've parsed the class attribute to figure out the row and column but there are other ways to figure out which image was clicked.