Skip to content

Modus-Logo-Long-BlackCreated with Sketch.

  • Services
  • Work
  • Blog
  • Resources

    OUR RESOURCES

    Innovation Podcast

    Explore transformative innovation with industry leaders.

    Guides & Playbooks

    Implement leading digital innovation with our strategic guides.

    Practical guide to building an effective AI strategy
  • Who we are

    Our story

    Learn about our values, vision, and commitment to client success.

    Open Source

    Discover how we contribute to and benefit from the global open source ecosystem.

    Careers

    Join our dynamic team and shape the future of digital transformation.

    How we built our unique culture
  • Let's talk
  • EN
  • FR

Recently, I came across a requirement where I needed to know when a Sencha Touch 2.0 Carousel Item is shown to the user (active item 0) to render an advertisement and when an item is hidden, to remove that advertisement from view. What I’ve learned is that the Carousel currently does not fire show or hide events for child items. If you were to listen to the Item’s `painted` event, you’d see that it will fire that event before it’s actually visible to the user, which does not fulfill my requirement. To make this happen, we have to extend the carousel to fire the show event at two distinct times (see code below). This is somewhat of a hack, but the one of the cleanest ways to make this happen.

Ext.define('AW.view.carousel.Stories', {
    extend : 'Ext.Carousel',
    xtype  : 'storiescarousel',
    cls    : 'storiescarousel',
    config : {
        flex      : 1,
        indicator : false
    },

    add : function() {
        this.callParent(arguments);
        this.getActiveItem().fireShowEvent();
    },

    onActiveItemAnimationEnd : function() {
        var me             = this,
            prevActiveItem = me.getActiveItem(),
            currentActiveItem;

        me.callParent(arguments);

        currentActiveItem = me.getActiveItem();

        (prevActiveItem != currentActiveItem) && currentActiveItem.fireShowEvent();
    },

    setOffsetAnimated: function(offset) {
        var me            = this,
            animDirection = me.animationDirection,
            prevItem      = me.getActiveItem();

        this.callParent(arguments);

        if (animDirection != 0) {
            prevItem.fireHideEvent();
        }
    }
});

In the above example, we are extending Carousel and adding two extension methods, `add` and `onActiveItemAnimationEnd`. Both of them call upon the `activeItem` to execute its `fireShowEvent()` method. `fireShow` is a custom method that we implement as child items to our custom Carousel in our application. We’ll cover this method in just a bit. We first extend the `add` method, because after all items are added, the Carousel will have initialized all of its items and set the proper active Item (via the `this.callParent()` method call). It is for this reason that we immediately execute `this.getActiveItem().fireShowEvent()`. We also extend `onActiveItemAnimationEnd` because the active item switch occurs either programmatically via the `animateActiveItem` method, or users swiping the Carousel. It so happens that the best time to figure out when a child item is being displayed is after the animation in either case, which is when `onActiveItemAnimationEnd` method is called on the base class. Again, we call upon the `activeItem` to fire it’s custom `fireShowEvent`, but only if the animation actually occurs for a new item. The last method we extend is `setOffsetAnimated`. We extend it because it’s a good vector to figure out if the Carousel item is being migrated off screen. We can figure out if the current item (known as `prevItem` in this method) is being swiped off screen if the `animationDirection` property is `!= 0`. When the carousel animates, it will either animate in either negative or positive direction with an absolute value 1. It only then do we call upon the item’s `fireHideEvent` method. All of this won’t work unless your Carousel child items actually have a `fireShowEvent` method. Here’s the pattern to extend `Component` and the insides of `fireShowEvent` method.

Ext.define('MyView.view.carousel.CarouselItem', {
    extend : 'Ext.Component',
    // rest of your code here
    fireShowEvent : function() {
        this.fireEvent('show', this);
    },
    fireHideEvent : function() {
        Ext.Function.defer(this.fireHideEvent, 500, this);
    },
    doFireHideEvent : function() {
        this.fireEvent('hide', this);
    }
});

The extension is pretty simple, as is `fireShowEvent`. One could argue that the Carousel extension could actually invoke the firing of the `show` event. However it is architecturally better to let the view itself fire the event, rather than having it being fired from some other caller. It’s worthwhile noting that the `fireHideEvent` delays the `hide` event firing via a deferred `doFireEvent` method call, by 1/2 second. We do this to allow the animation to complete in the Carousel before we allow the DOM to be manipulated off screen. With these two extensions, you can bootstrap your controllers to listen to the show event of a one or more child item and do things like dynamically inject or remove DOM for advertising or other cool stuff.

Posted in Application Development
Share this

Jay Garcia

Jay Garcia is co-founder of Modus Create. He is a veteran of the U.S. Air Force with 20-plus years of technology and consulting experience in leading RIA development for companies around the world. He is a co-organizer of the NoVa.JS and NYC.JS meetups, and is actively involved in the software communities that provide business frameworks and technologies, which enable rich mobile and desktop web experiences.
Follow

Related Posts

  • Sencha Touch 2.0
    Sencha Touch 2 Touch Events Re-firing

    While generally we try to avoid native browser alert() and confirm() we sometimes have no…

  • Sencha Touch 2.0
    Sencha Touch 2 Touch Events Re-firing

    While generally we try to avoid native browser alert() and confirm() we sometimes have no…

Want more insights to fuel your innovation efforts?

Sign up to receive our monthly newsletter and exclusive content about digital transformation and product development.

What we do

Our services
AI and data
Product development
Design and UX
Modernization
Platform and MLOps
Developer experience
Security

Our partners
Atlassian
AWS
GitHub
Other partners

Who we are

Our story
Careers
Open source

Our work

Our case studies

Our resources

Blog
Innovation podcast
Guides & playbooks

Connect with us

Get monthly insights on AI adoption

© 2025 Modus Create, LLC

Privacy PolicySitemap
Scroll To Top
  • Services
  • Work
  • Blog
  • Resources
    • Innovation Podcast
    • Guides & Playbooks
  • Who we are
    • Our story
    • Careers
  • Let’s talk
  • EN
  • FR