how to give animation to Panel?

[trandroid]

Hi everybody,

I want to give animations to Panel the code is below. I added animations but it didnt work. I saw docs of Panel
Animation to be used during transitions of cards. Note this only works when this container has a CardLayout. but how will I convert items to cardlayout I do not know.

new Ext.Panel({
fullscreen: true,
id: 'content',
scroll: 'vertical',
styleHtmlContent: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
layout: {
pack: 'center'
},
animation: {
type: 'slide',
cover: true
},
items: [{
xtype: 'splitbutton',
items: [{
text: 'News',
value: 'news',
handler: getNews
}, {
text: 'PP',
value: 'pp',
handler: getNews
}, {
text: 'PS',
value: 'ps',
handler: getNews
}]

}]
});


thanks for replies :)

[evant]

How are they supposed to animate? They're just buttons, in what circumstance would they move?

[trandroid]

No of course, I couldnt explain the question sorry for this. when the user clicks one of the splitbuttons, I update the Panel which code is on my first entry.


// I'm updating on Ajax method. For example;
Ext.getCmp('content').update(newsArray['news1'].tpl.apply(myJsonData));




// newArray is below
var newsArray= {
news1 : {
tpl : new Ext.XTemplate( [ '<tpl for="." >',
'<div class="news">',
'<div class="news_date">{date} {title}</div>',
'<div class="content">',
'<div class="content">{content} </div>',
'</div>', '</div>', '</tpl>' ])
},
news2 : {
tpl : new Ext.XTemplate( [ '<tpl for="." >',
'<div class="news">',
'<div class="news_date">{date} {title}</div>',
'<div class="content">',
'<div class="content">{content} </div>',
'</div>', '</div>', '</tpl>' ])
}
};

Simply, When I updating panel(id='content'), I want animations, if it is possible. I hope I explain correctly this time. :-?

[evant]

Again, what kind of effect are you looking for? On the content? I'm confused.