PDA

View Full Version : Error after upgrading from .91 to .93



mikeyroy
8 Aug 2010, 11:40 AM
Note: this all worked fine before upgrading to 0.93.

I am developing a web app with Sencha Touch that is setup with a tabpanel that has 5 main screens. Additionally, there are navigation flows off of 3 of the main screens to do different things. Navigating between the pages that are setup on the tabpanel is fine, but as soon as I use the setCard method ( BT.App.ui.setCard(BT.App.ui.SelectMenu, {type: 'slide', direction: 'left'}); ) to navigate to a card not setup in the tabpanel, I get the following error:

Uncaught TypeError: Cannot call method 'addClass' of undefined ext-touch-debug.js: 16039

When I get the error, the slide transition doesn't happen, but I get the requested card, however the previous card apparently isn't being removed from view, and elements of the cards, like a title at the top of the card remain on the page while the new items just get get stacked on top of each other as I navigate to new cards further in the flow. Once I get the error once, the tabpanel at the bottom is broken and has erratic behavior - bouncing between several screens and returning to the screen I last left off on.

I've dug into the objects it is getting the errors on, and there is a definite difference in what sencha touch generates for the cards in the tabpanel, and the cards that are in the different flows.

Card in the tabpanel:

badgeText: undefined
card: Object
componentLayout: Object
container: Object
el: Object
events: Object
icon: undefined
iconCls: "icon-send"
iconEl: Object
id: "ext-comp-1120"
initialConfig: Object
mons: Array (5)
ownerCt: Object
renderData: Object
renderSelectors: Object
rendered: true
text: "Send Item"
textEl: Object
xtype: "tab"
__proto__: Object

Card not in the tabpanel

badgeText: undefined
card: Object
events: Object
iconCls: "icon-send"
id: "ext-comp-1124"
initialConfig: Object
mons: Array (2)
ownerCt: Object
renderData: Object
renderSelectors: Object
text: "Select Item"
xtype: "tab"
__proto__: Object

It's producing the error because this.el doesn't exist in the second object I listed above...

The cards in the different flows are basically setup identically to the cards in the tabpanel, here's the code from one of the cards in the flow that has the error happen on it:


BT.views.AddFunds = Ext.extend(Ext.Panel, {
title: 'AddFunds',
iconCls: 'icon-account',
cls: 'page',
layout: {
type: 'card',
pack: 'center'
},
listeners: {
beforeactivate: function() {
if (typeof(addFundsListenersActivated) === 'undefined') {
Ext.get('card-on-file').on('tap', this.onCardView, this);

addFundsListenersActivated = true;
}
}
},
autoDestroy: false,
initComponent: function() {
this.BackButton = new Ext.Button({
text: 'back',
cls: 'x-button-back',
ui: 'back',
handler: this.onBack,
scope: this
});

this.TopNav = new Ext.Toolbar({
dock: 'top',
defaults: {
scope: this
},
autodestroy: true,
items: [this.BackButton, {xtype:'spacer'}, {xtype:'spacer'}]
});
this.dockedItems = [this.TopNav];

this.AddFundsContent = new Ext.Panel({
scroll:true,
contentEl: 'add-funds-screen'
});

this.items = [this.AddFundsContent];

BT.views.AddFunds.superclass.initComponent.call(this);
},
onBack : function() {
BT.App.ui.setCard(BT.App.ui.Account, {type: 'slide', direction: 'right'});
},
onCardView: function() {
if (Account.cc) {
BT.App.ui.setCard(BT.App.ui.ViewCard, {type: 'slide', direction: 'left'});
} else {
BT.App.ui.setCard(BT.App.ui.EditCard, {type: 'slide', direction: 'left'});
}
}
});

I'm at a loss as to what has changed between versions that it would start doing this, but I'm sure it's something simple. Any help is appreciated.

mikeyroy
10 Aug 2010, 6:03 AM
I still have this issue, can anyone even give me some leads?

evant
10 Aug 2010, 6:14 AM
It's difficult to say from just that, but it seems as though you're trying to access the element before it's being rendered.

mikeyroy
10 Aug 2010, 6:56 AM
Thanks Evan, I think you're right about that.

However, I am creating the instances for all the cards when the app is initializing. I posted the Account object, and the AddFunds object to the console after I initialize them, and...

Account looks like this:


AccountContent: Object
BackButton: Object
TopNav: Object
body: Object
componentLayout: Object
container: Object
dockedItems: Object
el: Object
events: Object
getContentTarget: function () {
getLayoutTarget: function () {
hidden: false
id: "ext-comp-1031"
initialConfig: Object
items: Object
lastSize: Object
layout: Object
mons: Array (0)
originalGetContentTarget: function () {
originalGetLayoutTarget: function (){
ownerCt: Object
renderData: Object
renderSelectors: Object
rendered: true
scroll: "vertical"
scrollEl: Object
scroller: Object
tab: Object
__proto__: Object

While AddFunds looked like this:


AddFundsContent: Object
BackButton: Object
TopNav: Object
dockedItems: Object
events: Object
id: "ext-comp-1113"
initialConfig: Object
items: Object
mons: Array (0)
renderData: Object
renderSelectors: Object
__proto__: Object

Then posting the AddFunds object to the console during the beforeactivate listener call within the AddFunds object it is this:


AddFundsContent: Object
BackButton: Object
TopNav: Object
body: Object
componentLayout: Object
container: Object
dockedItems: Object
el: Object
events: Object
getContentTarget: function () {
getLayoutTarget: function () {
hidden: false
id: "ext-comp-1113"
initialConfig: Object
items: Object
lastSize: Object
layout: Object
mons: Array (0)
originalGetContentTarget: function () {
originalGetLayoutTarget: function (){
ownerCt: Object
renderData: Object
renderSelectors: Object
rendered: true
scroll: "vertical"
scrollEl: Object
scroller: Object
tab: Object
__proto__: Object

The only difference is that Account gets added to this.items to have it included in the bottom tabs, and AddFunds does not. AddFunds is displayed after a tap event on a button, that calls setCard.

mikeyroy
10 Aug 2010, 7:50 AM
I realized the part that is missing is under the tab object (el) of the panel. Here is the AddFunds Panel with the tab object expanded, the el Object is missing from it, and is probably why that error is firing:



AddFundsContent: Object
BackButton: Object
TopNav: Object
body: Object
componentLayout: Object
container: Object
dockedItems: Object
el: Object
events: Object
getContentTarget: function () {
getLayoutTarget: function () {
hidden: false
id: "ext-comp-1113"
initialConfig: Object
items: Object
lastSize: Object
layout: Object
mons: Array (0)
originalGetContentTarget: function () {
originalGetLayoutTarget: function (){
ownerCt: Object
renderData: Object
renderSelectors: Object
rendered: true
scroll: "vertical"
scrollEl: Object
scroller: Object
tab: Object
badgeText: undefined
card: Object
events: Object
iconCls: "icon-account"
id: "ext-comp-1172"
initialConfig: Object
mons: Array (2)
ownerCt: Object
renderData: Object
renderSelectors: Object
text: "AddFunds"
xtype: "tab"
__proto__: Object
__proto__: Object

Should I be setting it up differently to have the bottom tabs always on the screen, and be able to navigate to cards that are not present in the bottom tabs, or is this a bug?

evant
10 Aug 2010, 3:35 PM
Posting the object state isn't really useful, you should try and post something we can drop in and run locally.

mikeyroy
11 Aug 2010, 6:32 AM
I was hesitant to post the whole project since there's hard coded account info in there during development, so instead I broke it down into the essentials zipped it up and attached it.

So you can see when you load up test.html that you can navigate between the bottom tabs fine, even use the back button on the account screen, but if you click on Add Funds text to be taken off of one of the panel's defined in the bottom tabs that you get the error.

mikeyroy
13 Aug 2010, 6:34 AM
I've reached a point where I couldn't develop anymore because of this, and so I switched back to .91 for now. Evan, let me know if you need anything more to look into this when you get a chance - or anybody else who sees this. Thanks.

mikeyroy
17 Aug 2010, 6:37 AM
Changing lines 16039-16049 of ext-touch-debug.js to fixes this error and returns the expected behavior:



activate : function() {
if (typeof(this.el) != 'undefined') {
this.el.addClass(this.activeCls);
this.fireEvent('activate', this);
}
},

deactivate : function() {
if (typeof(this.el) != 'undefined') {
this.el.removeClass(this.activeCls);
this.fireEvent('deactivate', this);
}
}


However comparing it to the code in .91, the object Ext.Tab hasn't changed at all, what has changed is what is added to the object that the activate and deactivate methods are trying to modify. As stated above, the objects are missing the 'el' object among others.

hendricd
17 Aug 2010, 6:46 AM
@Mikey --

This will be corrected for the next release.

Your current overrides are largely equivalent to the fix, except the events will still fire.

mikeyroy
17 Aug 2010, 6:50 AM
Sweet, good to know.

mikeyroy
17 Aug 2010, 7:11 AM
Doug - If you have that code handy can you post it here? I have one panel with unexpected behavior that isn't there if the events still fire.

hendricd
17 Aug 2010, 7:15 AM
Doug - If you have that code handy can you post it here? I have one panel with unexpected behavior that isn't there if the events still fire.


Ext.Tab.override({
// @private
activate : function() {
if (this.el) {
this.el.addClass(this.activeCls);
}
this.fireEvent('activate', this);
},

// @private
deactivate : function() {
if (this.el) {
this.el.removeClass(this.activeCls);
}
this.fireEvent('deactivate', this);
}
});

mikeyroy
17 Aug 2010, 8:22 AM
I see what you're saying now. Thanks Doug