PDA

View Full Version : Dropdown stops working after navigating back and forth a few times



CRH
28 Jun 2011, 7:30 AM
Hi all,

Really puzzled by the behavior of an app I am working on. I am following the method in "Tutorial:A Sencha Touch MVC application with PhoneGap". Opens with a list, touching one of the items triggers the controller to set the active viewport. This all works well, on one of the viewports there are two dropdown lists and initially they work, I can choose an alternate item from the dropdown, apply the changes and it saves it back to the database on the server; however after navigating back and forth between pages the dropdowns eventually just stop working.

Clues...

Using the "Heap Snapshot" in Chrome I notice the memory increases every time I navigate back and forth but the total memory is only 3.55mb.

If I load less data from the database I can navigate back and forth for longer before the dropdowns disappear.

Yesterday I implemented the "Pull to Refresh" plugin to update the list data, works great, the data in the initial list updates.....but the subsequent pages still have the original data..??

Any thoughts?

Thanks

Carlos

CRH
28 Jun 2011, 2:30 PM
On the form panel the datepickers will not work either once I navigate back and forth a few times, but then when I close the formpanel (set the active view back to the main list) the datepicker then shows up. I also noticed when I close the form panel after trying to use the dropdown list that it flashes very briefly on the screen as the main list opens.

Again this only happens after navigating for a bit, initially all works normally.

CRH
30 Jun 2011, 7:38 AM
I still can't figure this out, so I have stripped the code right down and still have the same issues.
1. The dropdown stops working after navigating back and forth 5 times.
2. Even though the data is updated on the main list the form data retains the original value from the initial database load.

I followed the MVC phonegap example.

app.js

Ext.regApplication({
name: "CMS",
launch: function() {
this.views.viewport = new this.views.Viewport();
}
});


view.js

CMS.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'fade',
initComponent: function() {
//put instances of cards into app.views namespace
Ext.apply(CMS.views, {
CMSMenu: new CMS.views.CMSMain(),
CMSDetailsForm: new CMS.views.CMSDetailsForm()
});
//put instances of cards into viewport
Ext.apply(this, {
items: [
CMS.views.CMSMain,
CMS.views.CMSDetailsForm
]
});
CMS.views.Viewport.superclass.initComponent.apply(this, arguments);
},
layoutOrientation : function(orientation, w, h) {
CMS.views.Viewport.superclass.layoutOrientation.call(this, orientation, w, h);
}
});


model.js

Ext.regModel('CMSFile', {
fields: [
{name: "id", type: "int"},
{ name: "CMSName", type: "string" },
{ name: "APStatusID", type: "int" }
],
});
CMS.stores.CMSData = new Ext.data.Store({
model : 'CMSFile',
proxy: {
type: 'ajax',
url: 'http://aesa/cmdWB4.asp',
reader: {
type: 'json'
}
},
autoLoad: true
});


controller.js

CMS.controllers.CMSController = new Ext.Controller({

showCMSDetailsForm: function(options) {
var id = parseInt(options.id),
CMSrecord = CMS.stores.CMSData.getById(id);
if (CMSrecord) {
CMS.views.CMSDetailsForm.updateWithRecord(CMSrecord);
CMS.views.viewport.setActiveItem(
CMS.views.CMSDetailsForm, options.animation
);
}
},

backToIndex: function(options) {
CMS.views.viewport.setActiveItem(
CMS.views.CMSMenu, options.animation
);
}

});


list.js

CMS.views.CMSMain = Ext.extend(Ext.Panel, {
items: [{
xtype: 'list',
emptyText : 'No data available.',
store: CMS.stores.CMSData,
plugins: [{
ptype: 'listpaging',
autoPaging: false
}, {
ptype: 'pullrefresh'
}],
itemTpl: '{CMSName} - {APStatusID}',
listeners: {
itemtap: function (list, index, item){
record = this.getRecord(item);
Ext.dispatch({
controller: CMS.controllers.CMSController,
action: 'showCMSDetailsForm',
id: record.getId()
});
}
},
grouped: false,
scroll: 'vertical',
fullscreen: true
}],
initComponent: function() {
CMS.views.CMSMain.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('CMSMain', CMS.views.CMSMain);


CMS.views.CMSDetailsForm = Ext.extend(Ext.form.FormPanel, {
scroll: 'vertical',
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'button',
text: 'Back',
ui: 'back',
handler: function() {
Ext.dispatch({
controller: CMS.controllers.CMSController,
action: 'backToIndex'
});
},
scope: this
},
{
id: 'apply',
text: 'Apply',
ui: 'action',
listeners: {
'tap': function () {
testupdate();
}
}
}
]
}],
items: [{
xtype: 'fieldset',
title: 'Position and Time Info',
items: [
{
xtype: 'selectfield',
name : 'APStatusID',
label: 'Status',
options: [{
text: 'UP',
value: 1
}, {
text: 'DOWN',
value: 2
}, {
text: 'LEFT',
value: 3
}, {
text: 'RIGHT',
value: 4
}]
},
{
xtype: 'numberfield',
name : 'id',
disabled: true,
label: 'id'
},
]
},

],
initComponent: function() {
CMS.views.CMSDetailsForm.superclass.initComponent.apply(this, arguments);
},

updateWithRecord: function(CMSrecord) {
this.load(CMSrecord);
Ext.each(this.items.items, function(item) {
item.update(CMSrecord.data);
});
var toolbar = this.getDockedItems()[0];
toolbar.setTitle(CMSrecord.get('CMSName'));
toolbar.getComponent('apply').CMSrecord = CMSrecord;
toolbar.getComponent('apply').form = this;
}
});


var testupdate = function()
{
Ext.Ajax.request({
url: 'http://aesa/cmdSDUpdate.asp',
params: {Details: CMS.views.CMSDetailsForm.getValues().id , abc : CMS.views.CMSDetailsForm.getValues().APStatusID},
method: 'POST',
failure : function(response){
data = Ext.decode(response.responseText);
Ext.Msg.alert('Error', data.errorMessage, Ext.emptyFn);
},
success: function(response, opts) {
data = Ext.decode(response.responseText);
Ext.Msg.alert('Saved', data.errorMessage, Ext.emptyFn);
}
});
}

Sample of the JSON data

[{"id":80,"APStatusID":1,"CMSName":"TEST DEF"},{"id":63,"APStatusID":1,"CMSName":"TEST ABC"},{"id":33,"APStatusID":1,"CMSName":"TEST"},{"id":11,"APStatusID":2,"CMSName":"TEST"},{"id":54,"APStatusID":3,"CMSName":"TEST"}]