Panels within panels, onTransitionStart, and toIndex

Fellow Enyo developers,

I am looking for a little help with an issue I am having when I have panels within panels. The foundation of my application is built around a 4 panel layout. One of my panels is what I call my contentPanel. It will be where all my app modules (modules: mini apps) will be rendered. One of my modules is actually laid out using panels. That is where my app goes into a panel within a panel layout. I am using the “onTransitionStart” event on the panels and watching for the “inEvent.toIndex” to know what panel we are moving to as we navigate. The issue is I only want to track the “toIndex” for the mainPanel which if the base panels of my app. What I am seeing is when I navigate in the panels that are within the contentPanel, it seems to fire the “onTransitionStart” event with the “toIndex” of the sub-panel. That is throwing off my application. How can I suppress this from coming from the sub-panels? Is there a better way to watch to determine what panel I am moving to on the base of of my app and ignore what is happening in the sub-panels?
You can look at my jsFiddle to see an example of what I am talking about. At the top there is a results box that shows the toIndex of the panel change. If you move around through the panels, you see the results change. You can see what I am talking about when you slide the mainPanels and the contentPanels around.

Any help with my issue will be greatly appreciated.



  • In your jsfiddle, you could check to see who the inSender is (i.e., main panel or subpanel). If main / sub panels were separate kinds, you could also capture the onTransitionStart event and do differential processing based on that, returning true (which may now be inEvent.preventDefault = true) to prevent bubbling of the event up to the owner.
  • Thanks Psarin, Turns out I was just making things harder than they needed to be. It took your comment to give me a jump-start. I am now looking at “var panelName =;” to grab the name of the panel, a simple IF panelName = “mainPanels”, then give me result of “inEvent.toIndex”. That was all I needed to get me rolling again. Some times it is just the simple things that stump me.
    Thanks again for all your help.
    panelChanged: function(inSender, inEvent) {
            var panelName =;
            if (panelName === "mainPanels") {
                this.$.result.setContent("toIndex: " + inEvent.toIndex);
  • Alternative return true from the onTransitionFinish handler for the Panels instance in the contentPanel to prevent it from propagating up the stack.
Sign In or Register to comment.