PDA

View Full Version : Uncaught TypeError: Cannot call method 'getWidth' of null



freeman0189
25 Jan 2012, 2:17 PM
I am using Sencha Touch 1.1 with PhoneGap 1.3 to develop an Android app. I have a List that displays data from a remote source. When one of the items is selected, it goes to a detail card that display additional details. However, I have a weird problem where the first time an item is selected, Sencha throws an error that says: "Uncaught TypeError: Cannot call method 'getWidth' of null". If I go back to the list then select the same item again or another item, the error does not get thrown and everything displays normally. I have determined that the error is coming from the detailHeader toolbar (my code is below). If I comment out the line that docks the detailHeader to the detailCard, the error does not happen. Additionally, if I do not comment out that line but I comment out the line that calls the update function on detailHeader, the error does not happen, but obviously I have no data in the detailHeader. Whenever the error happens, the detailHeader gets updated with the data, but the rest of the panel does not, unless I go back to the list then select the item again. Can anyone figure out what is going on here?

Here is the code:


var dataList = new Ext.List({
id: 'dataList',
store: null,
itemTpl:
'<tpl for=".">' +
'<div class="place">' +
'<span class="name">{name}</span>' +
'<span class="distance">{distance}</span>' +
'<span class="current-specials">{current_specials} current specials</span>' +
'<span class="friends-here">{friends_here} friends here</span>' +
'</div>' +
'</tpl>',
listeners: {
selectionchange: function(selectionModel, records) {
if (records[0])
{
placesCard.setActiveItem(detailCard, false);
detailCard.update(records[0].data);
}
}
}
});
var listCard = new Ext.Panel({
id: 'listCard',
layout: 'fit',
scroll: 'vertical',
items: [dataList]
});
var detailHeader = new Ext.Toolbar({
dock: 'top',
ui: 'light',
tpl: [
'<div class="detail-header">',
'<div class="name">{name}</div>',
'<tpl if="image_url != \'\'">',
'<img class="photo" src="{image_url}" width="100" height="100"/>',
'</tpl>',
'<div class="info">',
'{display_address}<br/>',
'</div>',
'<tpl if="display_phone != \'\'">',
'<div class="button x-button x-button-action">',
'<a href="tel:{display_phone}">{display_phone}</a>',
'</div>',
'</tpl>',
'<div class="button x-button x-button-action">',
'<a href="http://maps.google.com/?daddr={coordinates}">Get Directions</a>',
'</div>',
'</div>'
],
height: 160
});
var specialsTemplate = new Ext.XTemplate(
'<tpl if="specials != 0">',
'<tpl for="specials">',
'<div class="special {type}">',
'{item}',
'</div>',
'</tpl>',
'</tpl>',
'<tpl if="specials == 0">',
'No specials found',
'</tpl>'
);
var detailCard = new Ext.TabPanel({
id: 'detailCard',
layout: 'fit',
scroll: false,
dockedItems: [detailHeader],
tabBar: {
dock: 'top',
ui: 'light',
layout: { pack: 'center' },
cardSwitchAnimation: false
},
items: [{
title: 'Specials',
scroll: 'vertical',
styleHtmlContent: true,
xtype: 'tabpanel',
tabBar: {
dock: 'top',
ui: 'dark',
layout: {type: 'hbox', pack: 'justify'},
cardSwitchAnimation: false
},
defaults: {
styleHtmlContent: true,
tpl: specialsTemplate
},
items: [{
id: 1,
title: 'M'
},
{
id: 2,
title: 'Tu'
},
{
id: 3,
title: 'W'
},
{
id: 4,
title: 'Th'
},
{
id: 5,
title: 'F'
},
{
id: 6,
title: 'Sa'
},
{
id: 0,
title: 'Su'
}],
update: function(data) {
Ext.each(this.items.items, function(item) {
//DrinkSync.stores.Places.filter('day', item.id);
item.update(data);
});
}
},
{
title: 'Friends',
styleHtmlContent: true,
tpl: [
'{friends_here}'
]
}],
update: function(data) {
//console.log('update');
detailHeader.update(data);
//this.getDockedItems()[0].update(data);
Ext.each(this.items.items, function(item) {
item.update(data);
});
},
listeners: {
'backbutton': function() {
//console.log('back');
placesCard.setActiveItem(listCard, false);
dataList.deselect(dataList.getSelectedRecords()[0]);
}
}
});
var placesCard = new Ext.Panel({
id: 'placesCard',
layout: 'card',
scroll: false,
items: [listCard, detailCard]
});
DrinkSync.views.PlacesCard = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'fit',
scroll: false,
initComponent: function() {
Ext.apply(this, {
items: [placesCard]
});
DrinkSync.views.PlacesCard.superclass.initComponent.apply(this, arguments);
},
listeners: {
'afterrender': function() {
var cards = this;
cards.listCard = listCard;
cards.dataList = dataList;
cards.detailCard = detailCard;
cards.setLoading(true, true);
DrinkSync.getLocation(function(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
DrinkSync.getPlaces(lat, long, 'bars', 10000, function(store) {
if (typeof(store) !== 'undefined')
{
cards.dataList.bindStore(store);
placesCard.setActiveItem(cards.listCard);
}
else
{
alert('Error');
}
cards.setLoading(false);
});
});
}
}
});


Ext.reg('placesCard', DrinkSync.views.PlacesCard);


Not sure if this is relevant, but that code is contained within a TabPanel that serves as my viewport. Here is the code for that:


DrinkSync.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: false,
scroll: false,
initComponent: function() {
Ext.apply(this, {
//dockedItems: [titleBar],
tabBar: {
dock: 'bottom',
layout: {
pack: 'justify'
}
},
items: [
{ title: 'Places', iconCls: 'home', xtype: 'placesCard' },
{ title: 'People', iconCls: 'team', xtype: 'peopleCard' },
{ title: 'Drinks', iconCls: 'locate', xtype: 'drinksCard' },
{ title: 'Settings', iconCls: 'settings', xtype: 'settingsCard' }
]
});
DrinkSync.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});

rayman1900
11 Feb 2012, 8:34 AM
It's an annoying bug! In fact, I got it too ! I seem to isolated the problem where each time you call the update method on a toolbar to update a nested template, this error will show. I think, for as far as I tested, that this is a nasty bug, because when I update a template from a panel, this error does not show...but when I try on a toolbar(which is basically almost constructed like a panel), the error will happen.

Did you found a way to bypass this problem ?

Is anyone can see if this bug happen too ?

Thanks in advance for answering !

Ray

rayman1900
11 Feb 2012, 9:45 PM
After a while of testing different solutions, I got an idea to emulate a toolbar by disguising a panel with the x-toolbar-dark css from sencha, with the width and the appropriate height !

If the bug doesn't appear with a panel and only with a toolbar, it was clear that the solution above was the best and most believable choice to do...

So, Sencha Staff ? Can you check this and confirm that this is actually really a bug ?

freeman0189
12 Feb 2012, 12:28 PM
It's an annoying bug! In fact, I got it too ! I seem to isolated the problem where each time you call the update method on a toolbar to update a nested template, this error will show. I think, for as far as I tested, that this is a nasty bug, because when I update a template from a panel, this error does not show...but when I try on a toolbar(which is basically almost constructed like a panel), the error will happen.

Did you found a way to bypass this problem ?

Is anyone can see if this bug happen too ?

Thanks in advance for answering !

Ray

I believe I added "layout: 'fit'" to the toolbar and that fixed it.