internet explorer - Sencha-Touch 2.2.1 Simple drag works on Webkit browsers but not IE 10 -

i have complex application uses drag , drop in sencha 2.2.1 - works brilliant on webkit browsers, sencha touch supports ie 10 wanted try it.

i not drag working, started simple test scratch.

i built new "hello world" app using sencha cmd generate , used main.js see below. can drag inner panel in webkit browsers no problem, inner panel not show in ie 10. tried days, can't quite figure out how new ext.util.translatable deal works , how supposed work in ie 10.

(environment: win 7 64 bit; sencha 2.2.1 commercial sdk; sencha cmd v3.1.2.342; build package 'sencha app build package' , run index.html file folder w/ no webserver)

view\main.js:

ext.define('mytest.view.main', { extend: 'ext.tab.panel', xtype: 'main', requires: [     'ext.titlebar',     'ext.video',     'ext.util.draggable' ], config: {     tabbarposition: 'bottom',     items: [         {             title: 'welcome',             iconcls: 'home',             stylehtmlcontent: true,             scrollable: true,             items: [{                 docked: 'top',                 xtype: 'titlebar',                 title: 'welcome sencha touch 2'             },{                 xtype: 'panel',                 layout: 'hbox',                 html: 'mybutton',                 width: 300,                 height: 80,                 left: 5,                 top: 5,                 id: 'mydraggable',                 draggable: 'both',                 constraint: {                     min: { x: 0, y: 0 },                     max: { x: 1000000, y: 1000000 }                   },                 listeners: {                     drag: {                         element: 'element',                         fn:  function(draggable, e){                             console.log("left: ", this.getleft(), "top: ",this.gettop(), "x: ",this.element.getx(), "y: ",this.element.gety());                             //this.setleft(this.element.getx());                             //this.settop(this.element.gety());                         }                     },                     tap: {                         element: 'element',                         fn: function(view, index, target, record, event){                             alert("tapped");                         }                     }                 }             }]         },         {             title: 'get started',             iconcls: 'action',              items: [                 {                     docked: 'top',                     xtype: 'titlebar',                     title: 'getting started'                 },                 {                     xtype: 'video',                     url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',                     posterurl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'                 }             ]         }     ] }, initialize: function (){      this.callparent(); } }); 

i have faced same issue while developing application sencha touch framework. drag functionality works in -webkit browsers, fails in ie10.

what came drag functionality sencha internal mechanisms using -webkit-transform css property translate components within document.

as ie not support these properties drag fails.

my suggestion try override default functionality , implement polyfill browser.

sorry not providing fix issue (currently developing). when have working, i'll add here.