PDA

View Full Version : TypeError when adding/removing panels with Chrome for Android



clubby
29 Mar 2012, 2:31 PM
I'm getting an error: "TypeError: cannot read property 'style' of undefined"when I add a card to a panel, then try to switch to it. On my Galaxy Nexus, this occurs with the Chrome for Android browser, but not the stock browser. On an Android 2.3 device, the stock browser has this issue.

Sequence of events that lead to the error:
Create parentPanel
Add childPanel to parentPanel
setActiveItem for parentPanel to childPanel //works fine the first time, but not thereafter
Hit Back button, which destroys childPanel
Repeat starting at step 2. childPanel is added to parentPanel, but I get the aforementioned error message when I try to switch cards on the parentPanel to the childPanel.
Note: I created an alert before the card switch, and verified that the childPanel is an item of parentPanel.

Also, I have other childPanels that I tried adding/switching to, but I get the same error (i.e. after viewing the first childPanel, no childPanels can be viewed thereafter).

Any ideas on how to solve this, or is it a bug? Thanks for the help!



//
//views
//


Ext.define('MyApp.view.ParentPanel', {
extend: 'Ext.Panel',
requires: [
//add files
],
xtype: 'parent',
config: {
layout : {type: 'card',animation: 'slide'},
scrollable: false,
items: [
{xtype: 'toolbar',docked: 'top'},
{xtype: 'previewpanel'}
]
}
});


Ext.define('MyApp.view.PreviewPanel', {
extend: 'Ext.Panel',
requires: [
//files
],
xtype: 'previewpanel',
config: {
layout : {type: 'vbox'},
scrollable: 'vertical',
items: [
//items
]
}
});


Ext.define('MyApp.view.ChildPanel', {
extend: 'Ext.Panel',
xtype: 'childpanel',
config: {
layout: {type: 'fit'},
tpl: [
//tpl
]
},
initialize: function() {
this.relayEvents(this.element, ['tap']);
}
});




//
//controller
//


control {
previewPanel: {
tap: 'showChildPanel'
},
backButton: {
tap: 'onBackButtonTap'
},
},
createParentPanel: function() {
MyApp.view.ParentPanel.create();
parentPanel.onAfter('activeitemchange', function(a, b, oldCard, d) {
if (oldCard != previewPanel) {
oldCard.destroy();
}
});
},
showChildPanel: function(a) {
MyApp.view.ChildPanel.create();
var childPanel = this.getChildPanel(),
parentPanel = this.getParentPanel();
parentPanel.add(childPanel);
parentPanel.setActiveItem(childPanel);

//only works fine the first time I tap the previewPanel. After that, I get the TypeError.

},
onBackButtonTap: function(thisBtn, e, eOpts) {
var previewPanel = this.getPreviewPanel(),
parentPanel = this.getParentPanel();
parentPanel.animateActiveItem(previewPanel, {type: 'slide', direction: 'right'});

//childPanel is then destroyed per the activeitemchange listener on the parentPanel
}

mitchellsimoens
30 Mar 2012, 4:35 AM
First, in your MyApp.view.ChildPanel class you are overriding initialize without calling callParent. This will break things.

When you destroy a component it will not act correctly if you try to add it back. When you execute add() is this a new instance or a cached version of the old view that got ddestroyed?

clubby
30 Mar 2012, 7:12 PM
Thanks for the info Mitchell.

I added "this.callParent(arguments)" in my views at the beginning of any code that I placed in "initialize". This didn't help, so I also added that in my controllers wherever I had code in "init" (is this necessary too?). That didn't help either...

Also, I create a new childPanel every time, and then add the new panel to the parentPanel. I placed alerts in my code to verify that the new childPanel is added to the parentPanel before trying a card switch.

Does that fact that my app works fine on ios and the default android browser on my Galaxy Nexus shed any light on the situation? I learned that issue does exist though with the default android browser on Android 2.3.4.

Lastly, can you clarify whether I need to pass "arguments" to callParent?

Have a great weekend

clubby
30 Mar 2012, 7:17 PM
One other thing... I tried upgrading to Sencha 2.0.1, but this didn't help either. I saw that a bug was addressed: "Fixed issues with removal of items from some containers". I'm not sure if this may be related.

maddhippy
31 Mar 2012, 4:48 PM
I am having this issue as well with Android browser on 2.2 and 2.3.
Instead of a parentPanel, I am adding to Ext.Viewport, but the rest is the same. I add it the first time and it works, hit the back button to switch back. The childPanel has a listener on hide which destroys it.

I get the same error:
03-31 19:41:50.808: D/PhoneGapLog(28616): file:///android_asset/www/sencha/sencha-touch-debug.js: Line 13486 : Uncaught TypeError: Cannot read property 'style' of undefined

breckster
4 Apr 2012, 9:15 PM
Android 2.3.4

I can push a panel once and ONCE only. After that no errors... and no panel

Breck

Shafich
9 Apr 2012, 1:08 AM
In my case I have a - "dataview.list" inside a "tab.panel" - when the user clicks on any item of the "List TAB",<br>I create a carousel dynamically according and I set it to be the active tab.&nbsp;<br><br>Now this works perfectly on IOS, however it doesn't on android.<br><br>Issue is: <br>If the User tries to presses back (in the panel that contains the carousel) the applications stops working on ANDROID only&nbsp;(tested on &nbsp;android v2.1 v2.2 v2.3.3).<br>-The resulting error is: "TypeError: Result of expression 'c' [undefined] is not an object".<br>-Backbutton: sets another panel active and then deletes the carousel.<br><br>( note: works perfectly on IOS and pc-Chrome)&nbsp;<br>&nbsp;

Shafich
9 Apr 2012, 1:10 AM
In my case I have a - "dataview.list" inside a "tab.panel" - when the user clicks on any item of the "List TAB",
I create a carousel dynamically according and I set it to be the active tab.
Now this works perfectly on IOS, however it doesn't on android.

Issue is:
If the User tries to presses back (in the panel that contains the carousel) the applications stops working on ANDROID only (tested on android v2.1 v2.2 v2.3.3)
The resulting error is: "TypeError: Result of expression 'c' [undefined] is not an object"
-Backbutton: sets another panel active and then deletes the carousel.

( note: works perfectly on IOS and pc-Chrome)

cclark
14 Feb 2013, 9:37 AM
Anyone ever figure this out? Having a similar issue and completely stuck. I wipe out a card, which includes a carousel, with removeAll(true, true);. It loads once and then I get the c[undefined] is not an object error mentioned by previous poster. This is only in Froyo and Gingerbread devices.