PDA

View Full Version : Why events don't fire ?



te-deum
28 Apr 2011, 6:57 AM
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
28 Apr 2011, 7:23 AM
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
28 Apr 2011, 7:25 AM
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
28 Apr 2011, 8:44 AM
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.