Sencha touch Sencha Touch 2导航视图响应非常慢
我是Sencha Touch 2的新手。我正在为Android 2.3.4构建PhoneGap+Sencha Touch 2应用程序。我完成了应用程序的开发。在测试该应用程序时，我发现我使用的导航视图在点击披露项时响应非常慢。 我使用的是列表容器视图、列表视图和编辑器视图。下面给出了它们的代码。 下面的代码工作得很好，但在打开“披露”项时，事件编辑器视图会在10秒后显示，有时我甚至不知道是否单击了它 所以我需要两方面的帮助： 1.当我点击披露项时，我应该显示屏蔽，以知道我至少点击了它 2.或者加快事件编辑器视图的显示 列表容器视图：Sencha touch Sencha Touch 2导航视图响应非常慢,sencha-touch,extjs,sencha-touch-2,sencha-architect,Sencha Touch,Extjs,Sencha Touch 2,Sencha Architect,我是Sencha Touch 2的新手。我正在为Android 2.3.4构建PhoneGap+Sencha Touch 2应用程序。我完成了应用程序的开发。在测试该应用程序时，我发现我使用的导航视图在点击披露项时响应非常慢。 我使用的是列表容器视图、列表视图和编辑器视图。下面给出了它们的代码。 下面的代码工作得很好，但在打开“披露”项时，事件编辑器视图会在10秒后显示，有时我甚至不知道是否单击了它 所以我需要两方面的帮助： 1.当我点击披露项时，我应该显示屏蔽，以知道我至少点击了它 2.或者加
Ext.define('Sample.view.ListContainer', {
extend: 'Ext.NavigationView',
xtype:'listContainer',
id: 'idListContainer',
config: {
id:'idIncidentListContainer',
items:[
{
xtype:"incidentsList",
cls: "clsHeader"
}
]
}
});
Ext.define("Sample.view.IncidentsList", {
extend: "Ext.Panel",
xtype: 'incidentsList',
id: 'idIncidentList',
requires:[
'Ext.dataview.List',
'Ext.data.proxy.Memory',
'Ext.data.Store',
],
alias:'widget.incidentslist',
config: {
id: 'idIncidentList',
layout:'fit',
items: [
{
xtype: "toolbar",
docked: "top",
ui:'light',
id:"idHeaderTwo",
cls:"clsHeaderTwo" ,
items: [
{ xtype: 'title' ,
cls: 'clsLeftTitle',
title: "My Incidents",
},
{ xtype: 'spacer'},
{ xtype: 'title' ,
cls: 'clsRightTitle',
id: 'idIncidentsListTitle',
title:"Welcome",
},
]
},
{
xtype: "list",
store: "IncidentStore",
itemId:"incidentsList",
id:"inclist",
loadingText: "Loading Incidents...",
emptyText: "<div class=\"empty-text\">No incidents found.</div>",
onItemDisclosure: true,
itemTpl: Ext.create('Ext.XTemplate',
'<tpl if="TKT_STATUS_NAME == \'CLOSED\'">',
'<div class="vm_statusRed">',
'</tpl>',
'<tpl if="TKT_STATUS_NAME == \'OPENED\'">',
'<div class="vm_statusYellow">',
'</tpl>',
'<tpl if="TKT_STATUS_NAME == \'ASSIGNED\'">',
'<div class="vm_statusOrange">',
'</tpl>',
'<tpl if="TKT_STATUS_NAME == \'PENDING\'">',
'<div class="vm_statusRed">',
'</tpl>',
'<tpl if="TKT_STATUS_NAME == \'RESOLVED\'">',
'<div class="vm_statusOrange">',
'</tpl>',
'<tpl if="TKT_STATUS_NAME == \'REOPEN\'">',
'<div class="vm_statusYellow">',
'</tpl>',
'<div class="vm_dvList"><h4 class="vm_txtName"><span class="vm_listHeader"><label>Inci.#{TKT_ID} by </label><label class="vm_txtFirstName"><i>{FIRST_NAME:ellipsis(15, true)}</i></label></span><div class="date vm_clsDate">{CREATED_ON:date("d-M-y H:i")}</div></h4>',
'<div class="vm_title">{TKT_SUBJECT}</div>',
'<div class="vm_subDesc">{TKT_DESC}</div></div></div>'
)
}],
listeners: [
{
delegate: "#incidentsList",
event: "disclose",
fn: "onIncidentsListDisclose",
loadingText: "Loading ...",
},
]
},
initialize: function() {
this.callParent(arguments);
var getLoginData = localStorage.getItem('userData');
var parseData = JSON.parse(getLoginData);
var fname = parseData[0].FIRST_NAME;
var getIncidentData = localStorage.getItem('userIncidentData');
var parseIncidentData = JSON.parse(getIncidentData);
Ext.getCmp("idIncidentsListTitle").setTitle("Welcome, " + fname);
Ext.getStore("IncidentStore").setData(localStorage.userIncidentData).load();
},
onIncidentsListDisclose: function (list, record, target, index, evt, options) {
console.log("editIncidentCommand");
/*var list = Ext.getCmp('idIncidentList');
list.setMasked({
xtype:'loadmask',
message:'Loading...'
});*/
this.fireEvent('editIncidentCommand', this, record);
}
});
Ext.define("Sample.controller.Incidents", {
extend: "Ext.app.Controller",
config: {
refs: {
//lookup for views by xtype
incidentsListView:'incidentslist',
incidentEditorView: 'incidenteditorview',
incidentsList: 'incidentsList',
listContainer:'listContainer'
},
control: {
incidentsListView: {
//commands fired by the Incidents list container.
editIncidentCommand: "onEditIncidentCommand",
},
}
},
//Transitions
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
//Helper function(generates random integer)
getRandomInt: function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
//Function to get incident details and set them to incidentview
activateIncidentEditor: function (record) {
var incidentContainer = this.getListContainer();
var incidentEditorView = Ext.create("Sample.view.IncidentEditor");
incidentEditorView.setRecord(record); // load() is deprecated.
incidentContainer.push(incidentEditorView);
},
//on edit incident command
onEditIncidentCommand: function (list, record) {
this.activateIncidentEditor(record);
}
});
您也可以尝试在控制器上设置onbackbuttonap和其他事件。这将改善页面渲染分配。我也有类似的问题，在我的情况下，解决方案是：
我有一个类似的问题，在我的案例中，解决方案是：
感谢Rae的快速回复！！！另一个示例Sencha应用程序导航视图似乎工作正常。。。我怀疑我写的代码是否有错误。。。你能回顾一下并给出你的反馈吗。。。同时我会尝试你的建议！！除了不将侦听器放在控制器中之外，您的代码编写方式与我习惯的方式相同。小优化：Ext.getCmpidIncidentsListTitle.setTitleWelcome，+fname；此.downidIncidentsListTitle.set。。。。应该更快，因为它查询的是组件而不是整个应用程序：您还可以尝试在应用程序启动时创建编辑器实例，并在公开和显示时简单地操作其中的数据。避免了公开事件集Ext.Viewport.setMasked{xtype:loadmask，message:Loading…}和Ext.Viewport.setMaskedfalse上屏蔽->页面的整体呈现。我没有使用控制器中提到的任何转换来推送事件编辑器视图。。。您能告诉我在启动时创建编辑器实例的确切含义吗？谢谢Rae。。我试过这个。downidIncidentsListTitle.setTitleWelcome，+fname。。它在初始化函数中运行良好。。但是Ext.Viewport.setMasked{xtype:loadmask，message:Loading…}；和Ext.Viewport.setMaskedfalse不起作用。。实际上，我们什么时候应该在控制器中或在公开事件本身中将setMasked的值设置为false。。感谢您的建议和代码帮助…感谢Rae的快速回复！！！另一个示例Sencha应用程序导航视图似乎工作正常。。。我怀疑我写的代码是否有错误。。。你能回顾一下并给出你的反馈吗。。。同时我会尝试你的建议！！除了不将侦听器放在控制器中之外，您的代码编写方式与我习惯的方式相同。小优化：Ext.getCmpidIncidentsListTitle.setTitleWelcome，+fname；此.downidIncidentsListTitle.set。。。。应该更快，因为它查询的是组件而不是整个应用程序：您还可以尝试在应用程序启动时创建编辑器实例，并在公开和显示时简单地操作其中的数据。避免了公开事件集Ext.Viewport.setMasked{xtype:loadmask，message:Loading…}和Ext.Viewport.setMaskedfalse上屏蔽->页面的整体呈现。我没有使用控制器中提到的任何转换来推送事件编辑器视图。。。您能告诉我在启动时创建编辑器实例的确切含义吗？谢谢Rae。。我试过这个。downidIncidentsListTitle.setTitleWelcome，+fname。。它在初始化函数中运行良好。。但是Ext.Viewport.setMasked{xtype:loadmask，message:Loading…}；
和Ext.Viewport.setMaskedfalse不起作用。。实际上，我们什么时候应该在控制器中或在公开事件本身中将setMasked的值设置为false。。谢谢你的建议和代码帮助…你能为答案添加一些解决方案吗
Ext.define("Sample.controller.Incidents", {
extend: "Ext.app.Controller",
config: {
refs: {
//lookup for views by xtype
incidentsListView:'incidentslist',
incidentEditorView: 'incidenteditorview',
incidentsList: 'incidentsList',
listContainer:'listContainer'
},
control: {
incidentsListView: {
//commands fired by the Incidents list container.
editIncidentCommand: "onEditIncidentCommand",
},
}
},
//Transitions
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
//Helper function(generates random integer)
getRandomInt: function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
//Function to get incident details and set them to incidentview
activateIncidentEditor: function (record) {
var incidentContainer = this.getListContainer();
var incidentEditorView = Ext.create("Sample.view.IncidentEditor");
incidentEditorView.setRecord(record); // load() is deprecated.
incidentContainer.push(incidentEditorView);
},
//on edit incident command
onEditIncidentCommand: function (list, record) {
this.activateIncidentEditor(record);
}
});