Sencha-Touch 2.2.1简单拖动适用于Webkit浏览器,但不适用于IE 10

时间:2013-07-31 14:43:56

标签: internet-explorer sencha-touch-2 draggable internet-explorer-10 sencha-touch-2.2

我有一个复杂的应用程序,在Sencha 2.2.1中使用拖放 - 在Webkit浏览器上运行得很好,但是现在Sencha Touch支持IE 10我想尝试它。

我无法进行拖动工作,所以我从头开始进行一项非常简单的测试。

我使用sencha cmd generate构建了一个新的“hello world”应用程序,并使用了下面看到的Main.js。 我可以在webkit浏览器中拖动内部面板没问题,但是内部面板甚至没有出现在IE 10中。试了好几天,但是无法弄清楚这个新的Ext.util.Translatable交易是如何工作的以及它是如何工作的应该在IE 10中工作。

(环境:Win 7 64位; Sencha 2.2.1商业SDK; Sencha Cmd v3.1.2.342;像'sencha app build package'一样构建包并从文件夹运行index.html w / no webserver)< / p>

查看\ 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 to 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();
}
});

1 个答案:

答案 0 :(得分:1)

在使用Sencha Touch框架开发应用程序时遇到了同样的问题。拖动功能在-webkit浏览器中运行良好,但在IE10中失败。

我想到的是,对于拖动功能,sencha内部机制正在使用 -webkit-transform用于转换文档中组件的CSS属性。

由于IE不支持这些属性,因此拖动失败。

我的建议是尝试覆盖默认功能并为任何浏览器实现polyfill。

很抱歉没有为此问题提供解决方案(目前正在开发中)。当我将它工作时,我会在这里添加它。