Threaded View

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Vote Rating
    AntoVXR is on a distinguished road


    Default Answered: Image TabPanel

    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:

    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 id="homecontent">',
    '<div id="homeleft" class="halfpanel">',
    '<img src="images/portfolio.jpg" alt="portfolio" width="100%" />',
    '<div id="homeright" class="halfpanel">',
    '<img src="images/services.jpg" alt="services" width="100%" />',
    flex: 1,

  2. 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.

Thread Participants: 1