Threaded View

  1. 29 Sep 2012 4:28 AM #1
    pvmagacho
    pvmagacho is offline
    Sencha User
    Join Date
    Jul 2011
    Posts
    30
    Vote Rating
    0
    Answers
    1
    pvmagacho is on a distinguished road
      0  

    Default Answered: Painted event in Navigation View

    Answered: Painted event in Navigation View


    I am trying to use the painted event of a Container that is pushed into a Navigation View, because I need to get an element position inside the Container:

    ex:
    'main' is the navigation view

    Code:
    main.push({
      xtype: 'container',
      listeners: [
            {
                fn: 'onContainerPainted',
                delay: 500,
                event: 'painted'
            }
        ]
        onContainerPainted: function(component, options) {
                var box = component.down('#myId').element.getBox();
                // do something with box
        }
});
    However, because of the animation of the navigation view I have to add a delay to the painted event (as shown above) otherwise the position retrieved by the getBox function is not correct.

    Is there any way to fire an event only after the push/pop animation ends ? I've also tryed the push/pop event, but that did not work either since these events are fired before the painted event.

    Thank you.
    Reply With Quote Reply With Quote
  2. Best Answer Posted by pvmagacho

    For any Panel that uses card layout the following code works pretty well.

    Code:
            Ext.Viewport.getLayout().setAnimation({
            type: 'slide',
            duration: 200
        });
        var animation = Ext.Viewport.getLayout().getAnimation();

        animation.on({
                    animationend: function() {
                        // do stuff
                    },
                    scope: Ext.Viewport, 
                    single: true
        });

        Ext.Viewport.setActiveItem(Ext.create('MyApp.view.NextView'));