我有一个复杂的应用程序,在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();
}
});
答案 0 :(得分:1)
在使用Sencha Touch框架开发应用程序时遇到了同样的问题。拖动功能在-webkit浏览器中运行良好,但在IE10中失败。
我想到的是,对于拖动功能,sencha内部机制正在使用 -webkit-transform用于转换文档中组件的CSS属性。
由于IE不支持这些属性,因此拖动失败。
我的建议是尝试覆盖默认功能并为任何浏览器实现polyfill。
很抱歉没有为此问题提供解决方案(目前正在开发中)。当我将它工作时,我会在这里添加它。