PDA

View Full Version : 'layout.onRemove[undefined] is not a function'



kortovos
24 Nov 2010, 1:52 AM
Sencha Touch version tested:

1.0

Platform tested against:

iOS 4.2
Google Chrome 7.0
Safari 5.0

Test Case:

Ext.ux.UniversalUI = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
items: [{
cls: 'launchscreen',
html: '<div>...</div>'
}],
backText: 'Back',
useTitleAsBackText: true,
initComponent : function() {
this.navigationButton = new Ext.Button({
hidden: Ext.is.Phone || Ext.Viewport.orientation == 'landscape',
text: 'Navigation',
handler: this.onNavButtonTap,
scope: this
});

this.backButton = new Ext.Button({
text: this.backText,
ui: 'back',
handler: this.onUiBack,
hidden: true,
scope: this
});
var btns = [this.navigationButton];
if (Ext.is.Phone) {
btns.unshift(this.backButton);
}

this.navigationBar = new Ext.Toolbar({
ui: 'dark',
dock: 'top',
title: this.title,
items: btns.concat(this.buttons || [])
});

this.navigationPanel = new Ext.NestedList({
store: sink.StructureStore,
useToolbar: Ext.is.Phone ? false : true,
updateTitleText: false,
dock: 'left',
hidden: !Ext.is.Phone && Ext.Viewport.orientation == 'portrait',
toolbar: Ext.is.Phone ? this.navigationBar : null,
listeners: {
itemtap: this.onNavPanelItemTap,
scope: this
}
});

this.navigationPanel.on('back', this.onNavBack, this);

if (!Ext.is.Phone) {
this.navigationPanel.setWidth(250);
}

this.dockedItems = this.dockedItems || [];
this.dockedItems.unshift(this.navigationBar);

if (!Ext.is.Phone && Ext.Viewport.orientation == 'landscape') {
this.dockedItems.unshift(this.navigationPanel);
}
else if (Ext.is.Phone) {
this.items = this.items || [];
this.items.unshift(this.navigationPanel);
}

this.addEvents('navigate');
Ext.ux.UniversalUI.superclass.initComponent.call(this);
},

toggleUiBackButton: function() {
var navPnl = this.navigationPanel;

if (Ext.is.Phone) {
if (this.getActiveItem() === navPnl) {

var currList = navPnl.getActiveItem(),
currIdx = navPnl.items.indexOf(currList),
recordNode = currList.recordNode,
title = navPnl.renderTitleText(recordNode),
parentNode = recordNode ? recordNode.parentNode : null,
backTxt = (parentNode && !parentNode.isRoot) ? navPnl.renderTitleText(parentNode) : this.title || '',
activeItem;


if (currIdx <= 0) {
this.navigationBar.setTitle(this.title || '');
this.backButton.hide();
} else {
this.navigationBar.setTitle(title);
if (this.useTitleAsBackText) {
this.backButton.setText(backTxt);
}

this.backButton.show();
}
} else {
activeItem = navPnl.getActiveItem();
recordNode = activeItem.recordNode;
backTxt = (recordNode && !recordNode.isRoot) ? navPnl.renderTitleText(recordNode) : this.title || '';

if (this.useTitleAsBackText) {
this.backButton.setText(backTxt);
}
this.backButton.show();
}
this.navigationBar.doLayout();
}

},

onUiBack: function() {
var navPnl = this.navigationPanel;
if (this.getActiveItem() === navPnl) {
navPnl.onBackTap();
} else {
this.setActiveItem(navPnl, {
type: 'slide',
reverse: true
});
}
this.toggleUiBackButton();
this.fireEvent('navigate', this, {});
},

onNavPanelItemTap: function(subList, subIdx, el, e) {
var store = subList.getStore(),
record = store.getAt(subIdx),
recordNode = record.node,
nestedList = this.navigationPanel,
title = nestedList.renderTitleText(recordNode),
card, preventHide, anim;

if (record) {
card = record.get('card');
anim = record.get('cardSwitchAnimation');
preventHide = record.get('preventHide');
}

if (Ext.Viewport.orientation == 'portrait' && !Ext.is.Phone && !recordNode.childNodes.length && !preventHide) {
this.navigationPanel.hide();
}

if (card) {
this.setActiveItem(card, anim || 'slide');
this.currentCard = card;
}

if (title) {
this.navigationBar.setTitle(title);
}
this.toggleUiBackButton();
this.fireEvent('navigate', this, record);
},

onNavButtonTap : function() {
this.navigationPanel.showBy(this.navigationButton, 'fade');
},

layoutOrientation : function(orientation, w, h) {
if (!Ext.is.Phone) {
if (orientation == 'portrait') {
this.navigationPanel.hide(false);
this.removeDocked(this.navigationPanel, false);
if (this.navigationPanel.rendered) {
this.navigationPanel.el.appendTo(document.body);
}
this.navigationPanel.setFloating(true);
this.navigationPanel.setHeight(400);
this.navigationButton.show(false);
}
else {
this.navigationPanel.setFloating(false);
this.navigationPanel.show(false);
this.navigationButton.hide(false);
this.insertDocked(0, this.navigationPanel);
}
this.navigationBar.doComponentLayout();
}

Ext.ux.UniversalUI.superclass.layoutOrientation.call(this, orientation, w, h);
}
});

sink.Main = {
init : function() {
this.ui = new Ext.ux.UniversalUI({
title: Ext.is.Phone ? 'Sink' : 'Kitchen Sink',
useTitleAsBackText: false,
navigationItems: sink.Structure
});
}
};

Ext.setup({
tabletStartupScreen: 'resources/img/tablet_startup.png',
phoneStartupScreen: 'resources/img/phone_startup.png',
icon: 'resources/img/icon.png',
glossOnIcon: false,
onReady: function() {
sink.Main.init();
}
});Description:

I got the error: TypeError: Result of expression 'layout.onRemove'[undefined] is not a function ,while I was testing my app on a Ipad in portrait orientation. I used the navigation of the kitchensink as bases for the navigation of my app. The error occurs when the app is trying to remove the docked navigationpanel.
When trying with Chrome (changed 'if (orientation == 'portrait')' to 'if (orientation == 'portrait')) I got the following error:
Uncaught TypeError: Object dock has no method 'onRemove'
I also tested it with the kitchensink demo (since its the bases for my navigation) and I get the same error there

Steps to reproduce the problem:

Take the Kitchensink demo
in index.js, on line 171, change '(orientation == 'portrait')' to '(orientation != 'portrait')'

evant
24 Nov 2010, 2:39 AM
If you're posting in the bugs forum please follow the guidelines: http://www.sencha.com/forum/showthread.php?104623-Posting-to-the-bug-forum

kortovos
24 Nov 2010, 6:49 AM
Post altered to match guidelines.

kortovos
25 Nov 2010, 4:19 AM
Request that this thread is moved back to bugs.

evant
25 Nov 2010, 4:27 AM
That's not really a bug report, the test case is just a small code snippet.

Please post a short, complete, test case.

kortovos
25 Nov 2010, 4:42 AM
Like I said, you can use the kitchensink demo and alter a single character to have the same effect.

kortovos
26 Nov 2010, 1:26 AM
Nevermind, I don't have the bug anymore, though I didn't change anything.