Wednesday, December 25, 2013

Adjust Sencha Touch Carousel Indicators

Hello,

Recently we have a requirement in one of our project, to move carousel indicators outside the carousels. See the image below.

Now the issue was, main div container for the indicators is using the inline styling to position indicators based on user preferences. So we can override with class as we have to change the logic of the inline style. For that you have to override base class of Sencha Touch, name of the class is Ext.carousel.Indicator, you will find this class in src/carousel/indicator.js file in your sencha touch source code. Find the following function in the class.

updateDirection: function(newDirection, oldDirection) {
        var baseCls = this.getBaseCls();

        this.element.replaceCls(oldDirection, newDirection, baseCls);

        if (newDirection === 'horizontal') {
            this.setBottom(0);
            this.setRight(null);
        }
        else {
            this.setRight(0);
            this.setBottom(null);
        }
    }

Here you can see it's setting bottom property to zero. We have to override this function. Create an override.js file and attach it to your index.html file after sencha touch js file and add following code to it.

Ext.override(Ext.carousel.Indicator, {
    updateDirection: function(newDirection, oldDirection) {
        var baseCls = this.getBaseCls();

        this.element.replaceCls(oldDirection, newDirection, baseCls);

        if (newDirection === 'horizontal') {
            this.setBottom(-20);
            this.setRight(null);
        }
        else {
            this.setRight(0);
            this.setBottom(null);
        }
    }
});

As you see in the above code, we set bottom property to -20. You can use your own number here depending on your designs.

Hope this helps you.

3 comments:

  1. Hi sir can you tell me when should I use Ext.override and when should I use extend ? I am confused. help me if possible

    ReplyDelete
    Replies
    1. When you want to add something to base class, use extend and when you don't want to use something of base class, use override.

      Delete