Expanding list item on itemtap event with an animation

[clarose]

Hi,

I have a list component in my Sencha Touch application for which I want to have the items expand (and show more info) when the user taps on them.
I tried the solution provided in the following post on StackOverflow:

http://stackoverflow.com/questions/8590966/is-it-possible-to-make-sencha-touch-2-0-list-component-to-have-its-items-expanda

My item template is the following:

//-----------------
itemTpl: '<div class="plus"></div><div class="title">{contactName}\'s role is {contactTitle}</div><div class="detailsDivHide">{address}</div>'
//-----------------

But, my handler to animate the display of the details div does not work:
//-----------------
handleItemTap: function(dataview, index, item, e) {

var el = item.select('div.detailsDivHide');

Ext.Anim.run(el,'slide',{

out:false,

direction: 'down',

from: 'detailsDivHide',

to: 'detailsDivShow'

});

}
//-----------------

If I just to do the following:

//-----------------
handleItemTap: function(dataview, index, item, e) {

var el = item.select('div.detailsDivHide');

el.toggleCls('detailsDivHide'); //remove the hidden class if available..

el.show(true);

}
//-----------------

it works, but I do not get the animation.

While debugging, I noticed that in the "Ext.Anim.run" method, we have the following code:

Ext.Anim.run = function(el, anim, config) {

if (el.isComponent) {

el = el.el;

}


config = config || {};


if (anim.isAnim) {

anim.run(el, config);

}
else {

if (Ext.isObject(anim)) {

if (config.before && anim.before) {

config.before = Ext.createInterceptor(config.before, anim.before, anim.scope);

}
if (config.after && anim.after) {

config.after = Ext.createInterceptor(config.after, anim.after, anim.scope);

}
config = Ext.apply({}, config, anim);
anim = anim.type;

}

if (!Ext.anims[anim]) {

throw anim + ' is not a valid animation type.';

}
else {

if (el && el.dom) {
Ext.anims[anim].run(el, config);
}

}

}

};

Now, the way I am calling the "Ext.Anim.run" method, I would assume that only this section should get executed:

//-----------------

if (el && el.dom) {

Ext.anims[anim].run(el, config);

}

//-----------------

But when inspecting my "el" object, I see that the "dom" property is "undefined", so the "Ext.anims[anim].run" method is never executed. But I do not understand why, since I am successfully getting the "Ext.dom.CompositeElementLite" object when calling:

var el = item.select('div.detailsDivHide');

So, I do not know if I am either doing something wrong when using the Anim class or if there is a bug in the Ext.Anim.run method.

Does anyone have an idea how I can get my animation working ?
I hope I was clear enough in my explanation.
I am using ST2 PR3 btw.

Thanks in advance for your help,
Christian

[mitchellsimoens]

If you change the height of the element you can use CSS3 to animate:

-webkit-transition : height 300ms ease-in;

[clarose]

Thanks, I will try that, but this sounds like a workaround to the Ext.Anim.run method, is this correct ?
Is this workaround because the Ext.Anim.run method does not work correctly currently or am I not using it correctly ?

Thanks
Christian

[mitchellsimoens]

Just think it's simpler

[clarose]

Ok, I tried your solution, but I still get the error that my "dom" property in my CompositeElementLite component is "undefined".

Here is what I tried in my handler:

handleItemTap: function(dataview, index, item, e) {

var el = item.select('div.detailsDivHide');
el.toggleCls('detailsDivHide');
el.addCls('detailsDivShow');

el.setHeight(50);

}

I get the "undefined" error at the line: el.addCls('detailsDivShow');

In my CSS:

.detailsDivHide {
visibility: hidden;
display: none;
}

.detailsDivShow {
height: 0px;
visibility: visible;
display: inline;
-webkit-transition : height 300ms ease-in;
}

Could you provide some code snippet with your proposed solution ?
Thanks,
Christian

[mitchellsimoens]

Ext.create('Ext.dataview.List', {
    fullscreen: true,
    itemTpl: '<div>{from_user}</div><div>{text}</div>',
    store: {
        autoLoad: true,
        fields: ['from_user', 'text', 'profile_image_url'],

        proxy: {
            type: 'jsonp',
            url: 'http://search.twitter.com/search.json?q=Sencha Touch',

            reader: {
                type: 'json',
                root: 'results'
            }
        }
    },
    listeners : {
        itemtap : function(list, idx, el) {
            el.setHeight(200);
        }
    }
});

And have CSS:

.x-list-item {
    -webkit-transition : height 300ms ease-in;
}

[clarose]

Thanks for this, it works, but I noticed an odd behavior.
Let's say that my row height is 50px by default and when I tap/click on the row, I set the height to 75px in my handler. The problem is that the height does not animate from 50 to 75px but rather from 0 to 75px.

Is there any way to fix this behavior in order to get something similar to the example here (which uses the width instead of height, but the idea is the same):
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition4

Thanks again for the quick response,
Christian