我是Sencha Touch 2的新手。我正在为Android 2.3.4构建PhoneGap + Sencha Touch 2应用程序。我完成了应用程序的开发。在测试应用程序时,我发现我使用的导航视图在显示项目时响应非常慢。 我正在使用列表容器视图,列表视图和编辑器视图。它们的代码如下。 下面的代码工作得很好但是在公开项目的点击上,事件编辑器视图在10秒后显示,我有时甚至不知道它是否被点击。
所以我需要帮助两件事: 1.)当我点击披露项目时,我应该显示屏蔽,知道我至少点击它 2.)或加快事件编辑器视图的显示
ListContainer视图:
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.view.IncidentEditor", {
extend: 'Ext.form.Panel',
xtype: 'incidentsEditor',
id:'incidentsEditorView',
alias: "widget.incidenteditorview",
config: {
scrollable: 'vertical',
id:'idIncidentEditor',
layout:'vbox',
items: [
{
xtype: "toolbar",
docked: "top",
ui:'light',
id:"idHeaderTwo",
cls:"clsHeaderTwo",
items: [
{ xtype: 'title' ,
cls: 'clsLeftTitle',
title: "Incident Details",
},
{xtype: 'spacer'},
{ xtype: 'title' ,
cls: 'clsRightTitle',
id: 'idIncidentEditorTitle',
title:"Welcome",
},
]
},
{ xtype: "fieldset",
items: [
{
xtype: 'textfield',
name: 'TKT_SUBJECT',
label: 'Subject',
labelAlign: 'top',
cls:'vm_fieldFont',
clearIcon:false,
disabled:true
},
{
xtype: 'textareafield',
name: 'TKT_DESC',
label: 'Description',
labelAlign: 'top',
cls:'vm_fieldFont',
clearIcon:false,
disabled:true
},
{
xtype: 'textfield',
name: 'SEV_DESC',
label: 'Impact',
labelWidth:'45%',
cls:'vm_fieldFont',
clearIcon:false,
disabled:true
},
{
xtype: 'textfield',
name: 'SERVICE_NAME',
id:'displayIncident',
cls:'vm_fieldFont',
label: 'IncidentType',
disabled: true,
labelWidth:'45%',
},
{
xtype: 'textfield',
label: 'Category',
name: 'CATEGORY_NAME',
cls:'vm_fieldFont',
id:'getCategory',
labelWidth:'45%',
disabled: true,
},
]
},
],
},
initialize: function() {
var getLoginData = localStorage.getItem('userData');
var parseData = JSON.parse(getLoginData);
var fname = parseData[0].FIRST_NAME;
Ext.getCmp("idIncidentEditorTitle").setTitle("Welcome, " + fname);
//var list = Ext.getCmp('idIncidentList');
//list.unmask();
},
onIncidentsListDisclose: function (list, record, target, index, evt, options) {
console.log("editIncidentCommand");
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);
}
});
请帮助我们......先谢谢你们...... !!!
答案 0 :(得分:0)
我遇到了同样的问题。以MVC格式编码Sencha Touch 2使得应用程序在“旧”硬件上的响应速度超慢。特别是Android。这是HTML5 vs Native的缺点。然而,他们声称在手动构建lib时性能会提高,我几乎没有任何改进。
在Android上,大多数基于效果的问题都与动画有关。尝试将show / hide动画设置为none,看看它是否有所改进。 您也可以尝试在控制器上设置onBackButtonTap和其他事件。这应该改善页面渲染分配。
答案 1 :(得分:0)