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

      0  

    Default Answered: Image TabPanel

    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: 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,
    },
    ],
    },

  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.

  3. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    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:

    Code:
    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);
            });
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    5
    Vote Rating
    0
    AntoVXR is on a distinguished road

      0  

    Default


    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

  5. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    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.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar