Image TabPanel

[AntoVXR]

Hi There,

Were wanting to be able to click one of 2 images on the homepage of our app but can't quite work out how its done.

Here is the link to what we have: http://sugarcaneweb.co.uk/iOS2/index.html

We want to be able to click portfolio/services and on click the active tab be switched and the correct item be lit up at the bottom of the screen. could anybody advise? thanks Anto

Our code:

onReady: function() {

var panel = new Ext.TabPanel({
fullscreen: true,
tabBarPosition: 'bottom',

items: [
{
xtype: "toolbar",
docked: 'top',
cls: 'scw_toolbar',
html: '<img src="images/logo.png" alt="Sugarcane Web" width="113" height="30" style="margin-top: 8px;" />',
},
{
title: 'Home',
iconCls: 'home',
cls: 'home',
scrollable: 'vertical',

items: [
{
xtype: 'panel',
html: [
'<div class="homeimage">',
'<img src="/images/SOFA_PHOTO.jpg" width="100%" alt="SOFA_PHOTO" />',
'</div>',
'<div id="homecontent">',
'<div id="homeleft" class="halfpanel">',
'<img src="images/portfolio.jpg" alt="portfolio" width="100%" />',
'</div>',
'<div id="homeright" class="halfpanel">',
'<img src="images/services.jpg" alt="services" width="100%" />',
'</div>',
'</div>',
].join(""),
flex: 1,
},
],
},

[rdougan]

Here is a very simple example. But the basic idea is to add a tap listener onto the Component's element, and change the card whenever that happens:

Ext.setup({    
    onReady: function() {
        var home = Ext.create('Ext.Container', {
            title: 'Home',
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            defaults: {
                xtype: 'component',
                flex: 1
            },
            items: [
                {
                    id: 'portfolio',
                    html: 'Portfolio'
                },
                {
                    id: 'services',
                    html: 'Services'
                }
            ]
        });

        var portfolio = Ext.create('Ext.Container', {
            title: 'Portfolio',
            html: 'portfolio'
        });

        var services = Ext.create('Ext.Container', {
            title: 'Services',
            html: 'services'
        });

        var tabPanel = Ext.Viewport.add({
            xtype: 'tabpanel',
            tabBarPosition: 'bottom',
            items: [
                home,
                portfolio,
                services
            ]
        });

        Ext.getCmp('portfolio').element.on('tap', function() {
            tabPanel.setActiveItem(1);
        });

        Ext.getCmp('services').element.on('tap', function() {
            tabPanel.setActiveItem(2);
        });
    }
});

[AntoVXR]

Hi rdougan

Thank you for your reply. This is working with the desired effect

Just another quick question. the 2 buttons are visible, but you can click any area below the images to be taken to the respective pages. Is there a way to make the height of the containers the same height as the images within?

Cheers
Anto

[rdougan]

You would just remove align: stretch from the layout configuration, and then insert the images as HTML in the components. Because the layout CSS is pure CSS, it should just size to size of the image.

If that does not work for some reason, you can always remove align: stretch, and give each container a fixed height.