Htmlready事件未在Samsung Tablet上安装Android 5.0.2
我有一个为Android和iOS平板电脑编写的Sencha Touch和Cordova应用程序。但是，该应用程序似乎没有在Android 5.0.2的三星平板电脑上触发htmlready事件。
我之所以发现这是因为点按停止了应用程序中的某些按钮。最初我认为可能是tap事件发生了变化，然而，他们仍然使用Android 5.0.2在三星平板电脑中触发相同（我已经使用GapDebug看到了这一点，所以我知道触摸事件肯定会触发）。
然后，我发现我在面板的htmlready事件上注册事件处理程序的所有实例都不再被注册。在发布一些调试警报并测试是否在三星Galaxy Note 10.1 2014 Ed上的旧版Android（4.4.2）上触发了htmlready事件之后，就是我发现htmlready无法正常工作。
我做了很多调查和调试我正在努力解决如何注册这些事件处理程序。
从我读到的有关Sencha的内容来看，通常会在视图或控制器配置中完成。
在这种情况下，我在控制器配置中完成了它，因为视图不是通过使用sencha配置完全创建的，而是通过引入现有的html。
此时的任何建议和协助都会受到欢迎，比如.... - 有没有替代htmlready？ - 在使用导入的html视图时，我还能如何注册这些处理程序？
在我使用的应用中：
我已经包含了我觉得与该问题相关的代码部分。如果您还需要其他任何帮助，请告诉我。
首页视图（Home.js）
/**
* This view class defines content of Home page.
*
* @class MyApp.view.panels.Client
* @extends Ext.Panel
*/
Ext.define('MyApp.view.panels.Home', {
extend: 'Ext.Panel',
xtype: 'panel-home',
id: 'panel-home',
config: {
title: 'Home',
scrollable: true,
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch',
direction: 'normal'
},
items: [
{
xtype: 'titlebar',
title: 'Home',
docked: 'top',
items: [
{
align: 'left',
name: 'nav_btn',
iconCls: 'list',
ui: 'plain'
}
]
},
{
xtype: 'contentpanel',
name: 'home-content',
html: MyApp.utils.Global.loadContent('resources/content/home.html'),
flex: 1
},
{
xtype: 'footer'
}
]
},
listeners: {
itemtap: function() {
Ext.Msg.alert('event','delegate tap');
},
delegates:'div'
}
});
以下是加载到该视图中的html：
<div id="homeContainer" class="home-container">
<div class="home-section long">
<div class="home-section-button title blue top-left top-right large-shade">
<p class="home-title">Page Title</p>
</div>
<img id="info0" class="home-info-icon" src="resources/images/info-small.png">
</div>
<div class="home-section long">
<div id="info0Content" class="home-info app">
Some content to explain about the page.
</div>
</div>
<div class="home-section-column">
<div class="home-section short">
<div id="home-link-stuff" class="home-section-button slate large-shade">
<p class="home-button-title">About Stuff</p>
<p id="info1Content" class="home-info button">Overview of Stuff</p>
</div>
</div>
</div>
</div>
然后这是注册的事件如下：
/**
* This controller class is responsible for all navigation within the application. It handles the slide out menu and
* navigating between panels.
*
* @class MyApp.controller.Navigation
* @extends Ext.app.Controller
*/
Ext.define('MyApp.controller.Navigation', {
extend: 'Ext.app.Controller',
config: {
refs: {
main: 'main',
mainMask: 'main mask',
navBtn: 'button[name="nav_btn"]',
navigation: 'navigation',
homeContent: 'contentpanel[name="home-content"]'
//other references as well....
},
control: {
navigation: {
/**
* Navigate to panel when a item is tapped on the slide out menu.
*
* @method control.navigation.itemtap
*
* @param list {Object} Unused
* @param index {Integer} Unused
* @param target {Object} Unused
* @param e {Object} Unused
* @param record {Object} The record from the model containing the data about the panel to navigate to.
*/
itemtap: function(list, index, target, e, record) {
if(record.get('panelId') !== null) {
this.navigateTo(record.get('panelId'));
}
},
/**
* If the slide out menu item is a leaf item then close it.
*
* @method control.navigation.leafitemtap
*/
leafitemtap: function () {
this.toggleNav();
}
},
navBtn: {
/**
* Toggle the navigation slide out menu when the navigation button is tapped,
* @method control.navBtn.tap
*/
tap: 'toggleNav'
},
mainMask: {
/**
* Toggle the navigation slide out menu when the mask is tapped (i.e. anything outside the menu itself),
* Used to dismiss the menu easily.
*
* @method control.mainMask.tap
*/
tap: function() {
this.toggleNav();
}
},
homeContent: {
/**
* When the html on the Home panel is rendered, attach navigation link listeners to allow navigation by
* tapping on the links.
*
* @method control.homeContent.htmlready
*/
//THIS IS NOT FIRING FOR SOME REASON!!
htmlready: function() {
Ext.Msg.alert('event','htmlready');
this.addLinkListeners([
{ divId: 'home-link-stuff', panelId: 'panel-stuff' }
]);
}
}
}
},
//lots of other functions registrations
....
/**
* Causes navigation to the panel id passed to it. Also fires a navigatedTo event on the panel being navigated to
* and fires an navigatedAway event on the panel be navigated away from.
*
* @method navigateTo
* @param panelId {String} The id of the panel being navigated to.
*/
navigateTo: function(panelId) {
if(panelId !== null) {
var main = Ext.getCmp('main-tab-panel');
var panel = Ext.getCmp(panelId);
var from = main.getActiveItem();
main.setActiveItem(panel);
panel.fireEvent('navigatedTo', from);
from.fireEvent('navigatedAway', panel);
}
},
....
/**
* Method to add a listeners to a list of links passed to it. Used to enable app navigation on links in html and
* template code.
*
* @method addLinkListeners
* @param map {Array} Array of objects. The object array takes the form: [{ divId: 'my-div-id', panelId: 'my-panel-id' }]
*/
addLinkListeners: function(map){
var me = this;
map.forEach(function(linkMap){
Ext.get(linkMap.divId).on({
tap: function(e) {
me.navigateTo(linkMap.panelId);
},
touchstart: function(e){
e.delegatedTarget.classList.add('pressed');
},
touchend: function(e){
e.delegatedTarget.classList.remove('pressed');
}
});
});
}
});