Sencha Touch 2:IE 上的 itemtap 不针对 div
Sencha Touch 2: itemtap on IE not targeting divs
我正在开发一个 Cordova 混合应用程序,目前在 Windows 8.1 和 Sencha Touch 2 上遇到问题。我在一个带有一些子元素的列表项上得到了一些 divs。我定义了一个点击监听器。这适用于 Android 和 IOS,但不适用于 Win8.1 和 Internet Explorer。我总是得到上面说谎的 listitem-element 而不是点击的 div-containers.
这是简化的例子:
查看:
Ext.define( 'App.view.MyDataView', {
xtype: 'mydataview',
extend: Ext.dataview.List ,
config: {
inline: false,
title: "myTitle",
scrollToTopOnRefresh: false,
cls: 'MyDataView',
itemCls: 'MyDataViewItem',
pressedCls: 'MyDataViewItemPressed',
grouped: true,
listeners: {
tap: {
element: 'element',
//delegate: '.something',
fn: function (e)
{
console.log(e.target.className)
}
}
},
deferEmptyText: false,
infinite: true,
variableHeights: true,
itemTpl: new Ext.XTemplate(
[
'<div class="red" style="background-color:red;width:50%">',
'red',
'<div class="black" style="background-color:black;width:80%">',
'<div class="blue" style="background-color:blue;width:30%">blue</div>',
'black</div>',
'</div>'
].join( '' ),
{
compiled: true,
getInteractable: function() {},
//some member functions here...
}
)
}
});
e.target 点击听众总是给我以下内容:
<div class="x-unsized x-list-item WorkingHoursDataViewItem x-has-height x-list-item-tpl" id="ext-simplelistitem-85" style="height: 42px !important; min-height: 42px !important; transform: translate3d(0px, 264px, 0px);">
<div class="x-unsized x-list-disclosure x-item-hidden" id="ext-component-233" style="display: none !important;"></div>
<div class="x-innerhtml" id="ext-element-815">
<div class="red" style="width: 50%; background-color: red;">
red
<div class="black" style="width: 80%; background-color:black;">
<div class="blue" style="width: 30%; background-color:blue;">
blue
</div>
</div>
black
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我浏览了很多事件、e、目标,但没有对单击的 div 容器的引用:/
提前致谢!
//编辑:简化示例
// 它与 grouped:true 有关 -> 如果我将其注释掉,一切都会按预期进行
已修复 - 如果设置了 grouped: true,它会在 IE 上导致意外结果。
解决方法:显示视图后:list.updateGrouped()
我正在开发一个 Cordova 混合应用程序,目前在 Windows 8.1 和 Sencha Touch 2 上遇到问题。我在一个带有一些子元素的列表项上得到了一些 divs。我定义了一个点击监听器。这适用于 Android 和 IOS,但不适用于 Win8.1 和 Internet Explorer。我总是得到上面说谎的 listitem-element 而不是点击的 div-containers.
这是简化的例子:
查看:
Ext.define( 'App.view.MyDataView', {
xtype: 'mydataview',
extend: Ext.dataview.List ,
config: {
inline: false,
title: "myTitle",
scrollToTopOnRefresh: false,
cls: 'MyDataView',
itemCls: 'MyDataViewItem',
pressedCls: 'MyDataViewItemPressed',
grouped: true,
listeners: {
tap: {
element: 'element',
//delegate: '.something',
fn: function (e)
{
console.log(e.target.className)
}
}
},
deferEmptyText: false,
infinite: true,
variableHeights: true,
itemTpl: new Ext.XTemplate(
[
'<div class="red" style="background-color:red;width:50%">',
'red',
'<div class="black" style="background-color:black;width:80%">',
'<div class="blue" style="background-color:blue;width:30%">blue</div>',
'black</div>',
'</div>'
].join( '' ),
{
compiled: true,
getInteractable: function() {},
//some member functions here...
}
)
}
});
e.target 点击听众总是给我以下内容:
<div class="x-unsized x-list-item WorkingHoursDataViewItem x-has-height x-list-item-tpl" id="ext-simplelistitem-85" style="height: 42px !important; min-height: 42px !important; transform: translate3d(0px, 264px, 0px);">
<div class="x-unsized x-list-disclosure x-item-hidden" id="ext-component-233" style="display: none !important;"></div>
<div class="x-innerhtml" id="ext-element-815">
<div class="red" style="width: 50%; background-color: red;">
red
<div class="black" style="width: 80%; background-color:black;">
<div class="blue" style="width: 30%; background-color:blue;">
blue
</div>
</div>
black
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我浏览了很多事件、e、目标,但没有对单击的 div 容器的引用:/
提前致谢!
//编辑:简化示例 // 它与 grouped:true 有关 -> 如果我将其注释掉,一切都会按预期进行
已修复 - 如果设置了 grouped: true,它会在 IE 上导致意外结果。
解决方法:显示视图后:list.updateGrouped()