PDA

View Full Version : Navigation in TabPanel



MagoPagliaccio
17 Feb 2011, 7:38 AM
Hello everyone,
I'm new to Sencha Touch, and I'm playing around with some examples.
I would like to create a navigation framework, a sort of electronic book.
The structure would be composed by a TabPanel, with a bottom tabBar containing buttons for:
- the index panel
- the previous and next page
- the different pages (or a subset of them, maybe as a later development of the project).

I've been able to build the structure and the pages, but I cannot make the previous and next button work (in general, any button special handling).
I've tried both with inline function definition and with an external function (my preferred choice), but nothing seems to work.

Here you can find the complete code, in this case I would like to attach a listener to the previous button to the previousPage function.
Without considering that the proposed function could lead to an error similar to an array out of index, I keep getting


TypeError: Result of expression 'config' [undefined] is not an object.




Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {

var page1 = new Ext.Panel({
title: '1',
defaults: {
cls: 'card'
},
scroll:'vertical',
items: [{ title: 'Tab 1', html: '1'}]
});
var page2 = new Ext.Panel({
title: '2',
defaults: {
cls: 'card'
},
items: [{ html: '2'}]
});

var page3 = new Ext.Panel({
title: '3',
defaults: {
cls: 'card'
},
items: [{html: '3'}]
});

var structure = new Ext.TabPanel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
tabBar: {
dock: 'bottom',
scroll: 'horizontal',
layout: {
pack: 'center'
}
},
defaults: {
flex: 1
},
cardSwitchAnimation : 'cube',
items: [
{iconCls: 'bookmarks'},
{xtype: 'spacer'},
{iconCls: 'arrow_left',
listeners: {
cardswitch: this.previousPage,
scope: this
}
},
page1,
page2,
page3,
{iconCls: 'arrow_right'},
{xtype: 'spacer'},
{xtype: 'spacer'}
],
activeItem: 3,


previousPage: function() {
var currentPage = structure.getActiveItem();
structure.setActiveItem(currentPage-1);

}
});
}
});



If I put the function inline, the items element of structure tabPanel becomes



items: [
{iconCls: 'bookmarks'},
{xtype: 'spacer'},
{iconCls: 'arrow_left',
listeners: {
cardswitch: function() {
var currentPage = structure.getActiveItem();
structure.setActiveItem(currentPage-1);
Ext.Msg.alert("", 'It works');
}
}
},
page1,
page2,
page3,
{iconCls: 'arrow_right'},
{xtype: 'spacer'},
{xtype: 'spacer'}
],


In this case, no error appears, but nothing happens, not even the alert message...

Can you spot the error?
Thank you very much!

MP