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