PDA

View Full Version : Sencha Touch: Optimizing Memory Usage



Riaz
21 Jun 2011, 4:55 PM
According to the blog "http://www.sencha.com/blog/sencha-touch-optimizing-memory-usage/", it is not working. Could any body have tried this?

themightychris
21 Jun 2011, 5:18 PM
What's not working? The article describes techniques... Please share the code you tried

Riaz
21 Jun 2011, 9:04 PM
I have added sample test code. What is the wrong on my code?


Ext.setup({
tabletStartupScreen: "/images/tablet_startup.png",
phoneStartupScreen: "phone_startup.png",
icon: "icon.png",
glossOnIcon: true,
onReady: function () {
var deleteConfirm;
Ext.regModel("TestModel", {
fields: [
"company",
"price",
"change",
"pct",
"updated"
]
});
var store = new Ext.data.Store({
model: "TestModel",
data: [
{ company: "3m Co", price: 71.72, change: 0.02, pct: 0.03, updated: "9/1/2010" },
{ company: "Alcoa Inc", price: 29.01, change: 0.42, pct: 1.47, updated: "9/1/2010" },
{ company: "Altria Group Inc", price: 83.81, change: 0.28, pct: 0.34, updated: "9/1/2010" },
{ company: "American Express Company", price: 52.55, change: 0.01, pct: 0.02, updated: "9/1/2010" },
{ company: "American International Group, Inc.", price: 64.13, change: 0.31, pct: 0.49, updated: "9/1/2010" },
{ company: "AT&T Inc.", price: 31.61, change: -0.48, pct: -1.54, updated: "9/1/2010" },
{ company: "Boeing Co.", price: 75.43, change: 0.53, pct: 0.71, updated: "9/1/2010" },
{ company: "Caterpillar Inc.", price: 67.27, change: 0.92, pct: 1.39, updated: "9/1/2010" },
{ company: "Citigroup, Inc.", price: 49.37, change: 0.02, pct: 0.04, updated: "9/1/2010" },
{ company: "E.I. du Pont de Nemours and Company", price: 40.48, change: 0.51, pct: 1.28, updated: "9/1/2010" },
{ company: "Exxon Mobil Corp", price: 68.1, change: -0.43, pct: -0.64, updated: "9/1/2010" },
{ company: "General Electric Company", price: 34.14, change: -0.08, pct: -0.23, updated: "9/1/2010" },
{ company: "General Motors Corporation", price: 30.27, change: 1.09, pct: 3.74, updated: "9/1/2010" },
{ company: "Hewlett-Packard Co.", price: 36.53, change: -0.03, pct: -0.08, updated: "9/1/2010" },
{ company: "Honeywell Intl Inc", price: 38.77, change: 0.05, pct: 0.13, updated: "9/1/2010" },
{ company: "Intel Corporation", price: 19.88, change: 0.31, pct: 1.58, updated: "9/1/2010" },
{ company: "International Business Machines", price: 81.41, change: 0.44, pct: 0.54, updated: "9/1/2010" },
{ company: "Johnson & Johnson", price: 64.72, change: 0.06, pct: 0.09, updated: "9/1/2010" },
{ company: "JP Morgan & Chase & Co", price: 45.73, change: 0.07, pct: 0.15, updated: "9/1/2010" },
{ company: "McDonald's Corporation", price: 36.76, change: 0.86, pct: 2.40, updated: "9/1/2010" },
{ company: "Merck & Co., Inc.", price: 40.96, change: 0.41, pct: 1.01, updated: "9/1/2010" },
{ company: "Microsoft Corporation", price: 25.84, change: 0.14, pct: 0.54, updated: "9/1/2010" },
{ company: "Pfizer Inc", price: 27.96, change: 0.4, pct: 1.45, updated: "9/1/2010" },
{ company: "The Coca-Cola Company", price: 45.07, change: 0.26, pct: 0.58, updated: "9/1/2010" },
{ company: "The Home Depot, Inc.", price: 34.64, change: 0.35, pct: 1.02, updated: "9/1/2010" },
{ company: "The Procter & Gamble Company", price: 61.91, change: 0.01, pct: 0.02, updated: "9/1/2010" },
{ company: "United Technologies Corporation", price: 63.26, change: 0.55, pct: 0.88, updated: "9/1/2010" },
{ company: "Verizon Communications", price: 35.57, change: 0.39, pct: 1.11, updated: "9/1/2010" },
{ company: "Wal-Mart Stores, Inc.", price: 45.45, change: 0.73, pct: 1.63, updated: "9/1/2010" }
]
});


var Toolbar_details = new Ext.Toolbar({
title: 'Details',
dock: 'top',
items: {
text: 'Back',
ui: 'back',
handler: function () {
//panel.setCard(list);
}
}
});

var details = {
xtype: 'panel',
id: 'id_details',
dockedItems:[Toolbar_details]
,html:'Hi, this is details page'
};


var list = {
xtype: 'list',
id: 'id_list',
itemId: 'itemId_list',
title: 'Contacts',
itemTpl: '{company}',

store: store,

listeners: {
itemtap: function (lis, index, item, e) {
details.html = item.details;
Ext.getCmp('id_panel').setActiveItem(Ext.getCmp('id_details'));
}
}
// list & store configuration ...
};

var panel = new Ext.Panel({
fullscreen: true,
layout: 'card',
id: 'id_panel',
items: [list]
});

panel.on('cardswitch', function (newCard, oldCard) {
if (oldCard) {
this.remove(oldCard, true);
}
}, panel);
}
});

Riaz
21 Jun 2011, 10:24 PM
Is there any alternative?

jmclem
21 Jun 2011, 10:42 PM
Hi,

can you explain what goes wrong?

Jean-Marie.

Riaz
21 Jun 2011, 10:46 PM
Hi,

can you explain what goes wrong?

Jean-Marie.

I have written code on the suggestion of 'Optimizing Memory Usage'. However, it is not switching to details when I tap on item.
You will get clear idea when you run the above code.


However, if you need further description, please inform me.

jmclem
21 Jun 2011, 11:37 PM
Hi,

can you try following: put a breakpoint in your 'itemtap' handler function and follow execution. Check the values of the variables in the debugger.

Jean-Marie.

Riaz
22 Jun 2011, 4:56 AM
Hi,

can you try following: put a breakpoint in your 'itemtap' handler function and follow execution. Check the values of the variables in the debugger.

Jean-Marie.

I have tested on chrome, but I am not getting any error.

Could you cope my above code? It is full sample code. Any advice will be appreciated.

themightychris
22 Jun 2011, 5:38 AM
You might not get an error, but the variables you are using may not have the values you expect. Set a breakpoint on the first line of your itemtap handler like Jean-Marie suggested, I suspect that "item.details" might not be defined

Riaz
22 Jun 2011, 5:44 AM
I have modified my code. My code is bellow -




Ext.setup({
tabletStartupScreen: "/images/tablet_startup.png",
phoneStartupScreen: "phone_startup.png",
icon: "icon.png",
glossOnIcon: true,
onReady: function () {
var deleteConfirm;
Ext.regModel("TestModel", {
fields: [
"company",
"price",
"change",
"pct",
"updated"
]
});
var store = new Ext.data.Store({
model: "TestModel",
data: [
{ company: "3m Co", price: 71.72, change: 0.02, pct: 0.03, updated: "9/1/2010" },
{ company: "Alcoa Inc", price: 29.01, change: 0.42, pct: 1.47, updated: "9/1/2010" },
{ company: "Altria Group Inc", price: 83.81, change: 0.28, pct: 0.34, updated: "9/1/2010" },
{ company: "American Express Company", price: 52.55, change: 0.01, pct: 0.02, updated: "9/1/2010" },
{ company: "American International Group, Inc.", price: 64.13, change: 0.31, pct: 0.49, updated: "9/1/2010" },
{ company: "AT&T Inc.", price: 31.61, change: -0.48, pct: -1.54, updated: "9/1/2010" },
{ company: "Boeing Co.", price: 75.43, change: 0.53, pct: 0.71, updated: "9/1/2010" },
{ company: "Caterpillar Inc.", price: 67.27, change: 0.92, pct: 1.39, updated: "9/1/2010" },
{ company: "Citigroup, Inc.", price: 49.37, change: 0.02, pct: 0.04, updated: "9/1/2010" },
{ company: "E.I. du Pont de Nemours and Company", price: 40.48, change: 0.51, pct: 1.28, updated: "9/1/2010" },
{ company: "Exxon Mobil Corp", price: 68.1, change: -0.43, pct: -0.64, updated: "9/1/2010" },
{ company: "General Electric Company", price: 34.14, change: -0.08, pct: -0.23, updated: "9/1/2010" },
{ company: "General Motors Corporation", price: 30.27, change: 1.09, pct: 3.74, updated: "9/1/2010" },
{ company: "Hewlett-Packard Co.", price: 36.53, change: -0.03, pct: -0.08, updated: "9/1/2010" },
{ company: "Honeywell Intl Inc", price: 38.77, change: 0.05, pct: 0.13, updated: "9/1/2010" },
{ company: "Intel Corporation", price: 19.88, change: 0.31, pct: 1.58, updated: "9/1/2010" },
{ company: "International Business Machines", price: 81.41, change: 0.44, pct: 0.54, updated: "9/1/2010" },
{ company: "Johnson & Johnson", price: 64.72, change: 0.06, pct: 0.09, updated: "9/1/2010" },
{ company: "JP Morgan & Chase & Co", price: 45.73, change: 0.07, pct: 0.15, updated: "9/1/2010" },
{ company: "McDonald's Corporation", price: 36.76, change: 0.86, pct: 2.40, updated: "9/1/2010" },
{ company: "Merck & Co., Inc.", price: 40.96, change: 0.41, pct: 1.01, updated: "9/1/2010" },
{ company: "Microsoft Corporation", price: 25.84, change: 0.14, pct: 0.54, updated: "9/1/2010" },
{ company: "Pfizer Inc", price: 27.96, change: 0.4, pct: 1.45, updated: "9/1/2010" },
{ company: "The Coca-Cola Company", price: 45.07, change: 0.26, pct: 0.58, updated: "9/1/2010" },
{ company: "The Home Depot, Inc.", price: 34.64, change: 0.35, pct: 1.02, updated: "9/1/2010" },
{ company: "The Procter & Gamble Company", price: 61.91, change: 0.01, pct: 0.02, updated: "9/1/2010" },
{ company: "United Technologies Corporation", price: 63.26, change: 0.55, pct: 0.88, updated: "9/1/2010" },
{ company: "Verizon Communications", price: 35.57, change: 0.39, pct: 1.11, updated: "9/1/2010" },
{ company: "Wal-Mart Stores, Inc.", price: 45.45, change: 0.73, pct: 1.63, updated: "9/1/2010" }
]
});


var Toolbar_details = new Ext.Toolbar({
title: 'Details',
dock: 'top',
items: {
text: 'Back',
ui: 'back',
handler: function () {
mySetCard(list);
}
}
});




var details = {
xtype: 'panel',
id: 'id_details',
dockedItems: [Toolbar_details]
//, html: 'Hi, this is details page'
};




var list = {
xtype: 'list',
id: 'id_list',
itemId: 'itemId_list',
title: 'Contacts',
itemTpl: '{company}',

store: store,

listeners: {
itemtap: function (lis, index, item, e) {
details.html = item.details;
mySetCard(details);
}
}
// list & store configuration ...
};

var panel = new Ext.Panel({
fullscreen: true,
cardSwitchAnimation: { type: 'slide', duration: 1200, cover: false, reveal: false, scaleOnExit: false },
title: 'MainPanel',
layout: 'card',
id: 'id_panel',
items: [list]
});



panel.on('cardswitch',
function (thisPanel, newCard, oldCard, myBool) {
if (oldCard) {
this.remove(oldCard, true);
}
}, panel);



var mySetCard = function (list) {
panel.add(list);
panel.setActiveItem(1);
panel.doComponentLayout();
};
}
});



1. I clicked any item of 'List' and it is going to 'details' panel working perfect
2. I clicked on back button of 'details' and it is displaying 'list' working perfect
3. again I clicked on item of 'List' and I am getting an error
Uncaught TypeError: Cannot read property 'parentNode' of undefined

What should I do?

Riaz
22 Jun 2011, 4:35 PM
Any idea why it is happening?

stan229
23 Jun 2011, 7:38 AM
Yes.

See this thread and my solution to the bug:
http://www.sencha.com/forum/showthread.php?114218-OPEN-488-DockLayout-attempts-to-manipulate-DOM-element-after-it-s-been-destroyed&goto=newpost