2
我是Sencha Touch 2的新手。我正在爲Android 2.3.4構建PhoneGap + Sencha Touch 2應用程序。我完成了開發應用程序。在測試應用程序時，我發現我使用的導航視圖在響應披露項目時響應非常緩慢。 我正在使用列表容器視圖，列表視圖和編輯器視圖。它們的代碼如下所示。 以下代碼工作正常，但在披露項目的水龍頭事件編輯器視圖顯示10秒後，我有時甚至不知道它是否被點擊或不。Sencha Touch 2導航查看響應非常緩慢
所以我需要在兩點幫助： 1）當我在披露項目點擊我應該給屏蔽知道，我點擊它ATLEAST 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);
}
});
請幫我傢伙...在此先感謝...！
感謝李博快速回復.. !!!另一個示例Sencha應用程序導航視圖似乎工作正常...我懷疑我寫的代碼是否有錯誤...您可以請檢查它並給出您的反饋...同時我會嘗試您的建議...！ ！ – yrkapil
你的代碼和我習慣的一樣，除了不把監聽器放在控制器中。 小優化：Ext.getCmp（「idIncidentsListTitle」）。setTitle（「Welcome，」+ fname）; this.down（「＃idIncidentsListTitle」）.set ....應該更快，因爲它查詢組件而不是整個應用程序:) 您也可以嘗試在應用程序啓動時創建編輯器實例並在披露並顯示它時簡單操作其中的數據。 Circumvents頁面的總體渲染 – Rae
至於masking - >在披露事件集合Ext.Viewport.setMasked（{xtype：「loadmask」，message：「Loading ...」}和Ext.Viewport.setMasked（false）之後 – Rae