Sencha Touch won't hide my List - google-maps-api-3

Question

I have a Map and a List inside the same container with 2:5 flex ratio set. I would like to be able to toggle doubleclick on the map to maximize it to fill the container or reset it back to the original size depending whether the List is hidden. I wrote the function below and bound it to the map's dblclick event. I see it go into this function but it has no effect on what I see. Any ideas why my list won't animate and hide?
google.maps.event.addListener(that.getMap(), 'dblclick', function () {
var list = Ext.ComponentQuery.query('#BuildingList')[0];
var height = list.getHeight();
if (list.isHidden()) {
list.show(Ext.Anim({
easing: 'easeInOut',
duration: 1000,
autoClear: false,
from: {
opacity: 0,
height: '0px'
},
to: {
opacity: 1,
height: list.getHeight() + 'px'
}
}));
} else {
list.hide(Ext.Anim({
easing: 'easeInOut',
duration: 1000,
autoClear: false,
from: {
opacity: 1,
height: list.getHeight() + 'px'
},
to: {
opacity: 0,
height: '0px'
}
}))
}
});

Answer 1

The best way to do this sort of thing I found was to set the flex to 0 of the list on the dblclick event (which I had to add as an override to the map), as follows:
that.addAfterListener('dblclick', function (view, map, zoomlevel, eOpts) {
var list = view.getParent().down('buildings');
Ext.Anim.run(list, 'fade', {
easing: 'easeInOut',
autoClear: false,
duration: 300,
after: function () {
list.setFlex(0);
}
});
});