1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12
    Vote Rating
    10
    pentool will become famous soon enough

      0  

    Default Unanswered: Carousel indicator - feature request

    Unanswered: Carousel indicator - feature request


    I'd like to have a feature for the carousel's indicator. Currently the indicator is hovering over the carousel. Which means, if I put items in the carousel using a dataview, list, (think of the AppStore on the iPad), I'd like the indicators to be UNDER the items that are in the carousel as opposed to overlay them.

    The same is true for full size carouse images. The indicators will hover over the image.

    I'd like an option where the indicators will automatically shrink the carousel's content area and so they can be positioned at the bottom with, say, a single color row, so the indicators are clearly visible.

    Currently I'm using a twisted workaround for this. On resize and painted events, I measure the height of the carousel, then subtract from it the height of the titlebar, then measure and subtract the height of the indicators, and that will be the actual height of the carousel. Then I have to use this number to lay out the contents so that the indicators will not be positioned over the contents and will have clear visibility. To do all this is an overkill.

    Unless, of course, someone can suggest a better way of going about this. I tried docking the indicator at the bottom, thinking this would reduce the content height of the carousel, but had no effect for some reason.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,328
    Answers
    3540
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Why not just show and hide the indicator:

    Code:
    new Ext.carousel.Carousel({
        fullscreen : true,
        items      : [
            {
                xtype  : 'toolbar',
                docked : 'top',
                items  : [
                    {
                        text    : 'Hide Indicator',
                        handler : function (button) {
                            var carousel  = button.up('carousel'),
                                indicator = carousel.getIndicator();
    
                            indicator.hide();
                        }
                    },
                    {
                        text    : 'Show Indicator',
                        handler : function (button) {
                            var carousel  = button.up('carousel'),
                                indicator = carousel.getIndicator();
    
                            indicator.show();
                        }
                    }
                ]
            },
            {
                html : 'One'
            },
            {
                html : 'Two'
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12
    Vote Rating
    10
    pentool will become famous soon enough

      0  

    Default


    Well, thanks, but the issue is not showing or hiding. I want the indicators to be visible but NOT floating over the content.

    As it is currently, they are ALWAYS floating over the content. I don't want that. I want them to be ALWAYS visible and positioned BELOW the content.

    And you have to do some measuring left and right to make that work. A simple config option would be so much better.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,328
    Answers
    3540
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    So the indicators will be off screen if you have an image that is 100% the height/width? IMO that isn't very user friendly
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12
    Vote Rating
    10
    pentool will become famous soon enough

      0  

    Default


    Ok, lemme illustrate with some screenshots. See the indicators (circled in red) are actually BELOW the content and not OVER it? In case of the last screenshot they are both UNDER and ABOVE the content. They are not hovering OVER the content. That's what I'm talking about. A config choice where you can place the indicators either BELOW (as on the screenshots) or OVER the content - as currently is with the Ext.Carousel.

    indicators1.jpg


    indicators2.jpg


    indicators3.jpg

  6. #6
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    There isn't a default config you can do to get this result.

    You can try creating your own carousel with a inner container to hold all the cards that is fit to a smaller size and having its indicators floating on the top, bottom, or both.

    Best to start by looking at the source for the carousel.
    carousel.js
    carousel.scss

    If you want to just use docked toolbars with naviation buttons on the left and right side you can do that, but the idicator would still float on the bottom of the carousel content.

Thread Participants: 2

Tags for this Thread