Animating dimensions in Sencha Touch 2

Question

I'm trying to animate the height of a dataview, but it's currently just sliding the panel around the viewport instead of keeping it in place and changing it's height. The code is as follows:

Ext.Anim.run(el, 'slide', {
  from: { height: height },
  to: { height: newHeight },
  out: false,
  direction: 'up',
  easing: 'ease-out',
  duration: 1000
});

For instance, height=200, newHeight=100 will result in the dataview dropping immediately so that it's top is at 200px below the viewport, and then animating back to the top of the viewport.

How can I get it to change the height? Thanks.

Answer 1

Try using Ext.Animator.run instead:

Ext.Animator.run({
    element: dataview.element,
    duration: 500,
    easing: 'ease-in',
    preserveEndState: true,
    from: {
        height: dataview.element.getHeight()
    },
    to: {
        height: 100
    }
});

And within a full example:

Ext.application({
    name: 'Sencha',

    launch: function() {
        var dataview = Ext.create('Ext.DataView', {
            fullscreen: true,
            style: 'background:red',
            store: {
                fields: ['text'],
                data: [
                    { text: 'one' },
                    { text: 'two' },
                    { text: 'three' }
                ]
            },
            itemTpl: '{text}'
        });

        Ext.Viewport.add({
            xtype: 'button',
            docked: 'top',
            handler: function() {
                Ext.Animator.run({
                    element: dataview.element,
                    duration: 500,
                    easing: 'ease-in',
                    preserveEndState: true,
                    to: {
                        height: 100
                    },
                    from: {
                        height: dataview.element.getHeight()
                    }
                });
            }
        });
    }
});

Answer 2

Since I can't add comments, I'll have to put this as a separate answer. I just wanted to add to what rdougan said and show how you can catch the animation end event. I find it's necessary in the above situation because Sencha Touch's component.getTop/Left/Height/Width() functions return incorrect values after an animation such as the one shown.

dataview.setHeight(dataview.element.getHeight()); // you may or may not need this

console.log('height before\t', dataview.getHeight());

var a = new Ext.fx.Animation({
    element: dataview.element,
    duration: 500,
    easing: 'ease-in',
    preserveEndState: true,
    from: {
        height: dataview.element.getHeight()
    },
    to: {
        height: 100
    }
});

a.on('animationend', function (animation, element, isInterrupted) {
    console.log('height before\t', dataview.getHeight());
    dataview.setHeight(dataview.element.getHeight());
    console.log('height set\t', dataview.getHeight());
});

Ext.Animator.run(a);

I left in some logging so you can see just what I mean. This example was written against ST 2.1 RC2.