PDA

View Full Version : Dynamically adding new items to Carousel



kostik83
9 Jul 2010, 6:54 AM
[SOLVED]

When I upgraded framework, i forgot to upgrade css :)
This thread can be deleted.

Whenever i dynamically add new items to carousel, it is properly added in the html source, yet every card show same (first card) content.

So something along these lines:



<script type='text/javascript'>
new Ext.Carousel({
id: 'layout',
fullscreen: true,
items: {
xtype: 'panel',
id: 'dummy',
html: 'Welcome!'
},
});
</script>
Later using PHP I generate code to add to the carousel first card


<script type='text/javascript'>
Ext.onReady(function() {
var form_".$this->id." = new Ext.form.FormPanel({
id: '".$this->id."',
scroll: 'vertical',
items: //form items
});

var layout = Ext.getCmp('layout');
var active = layout.getActiveItem();
if (active.id == 'dummy') {
layout.remove(active.id, true);
}
layout.add(form_".$this->id.");
layout.doLayout();
layout.next();
</script>So this words fine thus far

Now when a button is clicked on the form, I make an AJAX call and EVAL the same kind of code as above only with a different form. The problem is that although HTML is properly added, the form is not displayed in the Carousel. What is interesting is if I removeAll() elements from the Carousel and then add() a new one, I see the new card. So it simply does not switch cards (although indicator shows that it is switched)

Thanks,

Kostik