Why events don't fire ?

[te-deum]

Hello,

I have a very simple SenchaTouch application and I want to add some code while afterrender event is fired. But the event isn't fired :s

Here is my code :

var rootPanel;

Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function(){
rootPanel = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
scroll: 'horizontal',
sortable: false,
layout: {
pack: 'center'
}
},
cls: 'card1',
items: [
{title: 'Infos', html: '<p>Informations sur le logiciel</p>', iconCls: 'info', cls: 'card card1'},
{title: 'Favoris',html: 'Favoris',iconCls: 'favorites',cls: 'card card2'},
{title: 'Download',html: 'Downloads',cls: 'card card3',iconCls: 'download'},
{title: 'Settings',html: 'Settings',cls: 'card card4',iconCls: 'settings'},
{title: 'User',html: 'User',cls: 'card card5',iconCls: 'user'
}],
dockedItems: [botPub]
});
}
});

var botPub, pubInterval=, pubIndex=0;

botPub = new Ext.Panel({
height: 100,
layout: 'card',
dock: 'bottom',
cardSwitchAnimation: {type: 'slide', duration: 500},
items: [
{html: 'Pub 1', style:'background-color:#FF0000; color:white;'},
{html: 'Pub 2', style:'background-color:#00FF00; color:white;'},
{html: 'Pub 3', style:'background-color:#0000FF; color:white;'},
{html: 'Pub 4', style:'background-color:#FF0000; color:white;'},
{html: 'Pub 5', style:'background-color:#00FF00; color:white;'},
{html: 'Pub 6', style:'background-color:#0000FF; color:white;'},
{html: 'Pub 7', style:'background-color:#FF0000; color:white;'},
{html: 'Pub 8', style:'background-color:#00FF00; color:white;'},
{html: 'Pub 9', style:'background-color:#0000FF; color:white;'},
{html: 'Pub 10', style:'background-color:#AAAAAA; color:white;'}
],
afterrender: function() {
if (pubInterval=='')
pubInterval = window.setInterval(this.nextPub(),60000/this.items.length);
},
nextPub: function() {
pubIndex++;
if (!pubIndex || pubIndex >= this.items.length)
pubIndex = 0;
this.setActiveItem(pubIndex);
}
});
I would like my botPub to rotate each items automatically.

If you have an idea on how to dispose botPub panel up to the toolbar (instead of bottom).

Thank you.

[AndreaCammarata]

Hi,
you are making a simple error:
You have to declare your "afterrender" event inside a "listeners" section in this way:



listeners: {
afterrender: function() {
if (pubInterval==''){
pubInterval = window.setInterval(this.nextPub(),60000/this.items.length);
}
}
}

You aven have to notice that your function "nextPub" is a function defined by you, and is not native of an Ext.Panel, so it's better you don't define it in this way.

Hope this helps.

[Stoot98]

Define your afterrender handler function in the 'listeners' config, e.g.




...
listeners: {
afterrender: function(){
// your code
}
}




If you give the botPub panel the value of 'top' for the 'dock' config it should be displayed at the top of the screen.

[te-deum]

Hello / Re,

Thank you andreacammarata & Stoot98 !

@Stoot98 : If I set dock to the top, my panel is on the top of the screen. I want to have my botPub just above the toolbar without switching with toolbar items.
I don't think it's possible to do this...

Regards.