Results 1 to 4 of 4

Thread: Image TabPanel

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Nov 2011
    Vote Rating

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts