Sencha touch transform (scaling) a panel resets the transform on dragstart

Question

I'm trying to build a zoomable panel in using Sencha Touch 2, something on the lines of this However, after I apply a transform scale, like (assuming the "mapcontainer" is the element I need to pinch-zoom):

Ext.getCmp('mapcontainer').setStyle({
    'transform':        'scale(2)',
    '-ms-transform':    'scale(2)',
    '-webkit-transform':'scale(2)'
});

and dragstart, the scale on the element is reset to 1.

As more information, I've tried returning false on all other events, including dragstart. But it does not seem to preserve the scale.

Any ideas why?

Answer 1

Figured out the solution, not the reason though. (Anyone?)

Basically I was scaling up the container, but not increasing its width and height.

So, finally the code looks like:

Ext.getCmp('mapcontainer').setHtml("Hello");
Ext.getCmp('mapcontainer').setStyle({
    'transform':        'scale(2)',
    '-ms-transform':    'scale(2)',
    '-webkit-transform':'scale(2)'
});
Ext.getCmp('mapcontainer').setHeight('200%');
Ext.getCmp('mapcontainer').setWidth('200%');

Notice that we need to do a setHeight and setWidth instead of using them in setStyle, since these config values override the values set using CSS.