Carousel - Programmatic Card Turning

[arlo.carreon]

I am showing property listings on a map. When a user clicks on a marker, I show a panel with the following carousel.



// Carousel for properties
propertyCarousel = new Ext.Carousel({
defaults: {
cls: 'card',
scroll: 'vertical'
},
items: [/*cards are loaded dynamically, via JSONP callback.*/]
});


I load the cards into the carousel when I plot the markers on the map. When the user clicks a marker, I want the carousel to show the card that CORRESPONDS with the marker that was clicked on.

Here is my listener:


// click listener for markers
google.maps.event.addListener(marker, 'click', function(){

// Show the property popup panel
propertyWindow.show();

// Loop through search results until you find the one that was clicked on
var found = false;
do{
if( propertyCarousel.getActiveItem().position == data.position )
found = true;
else
{
// Determine whether to move forward or backward on the list
if( propertyCarousel.getActiveItem().position < data.position )
propertyCarousel.next();
else
propertyCarousel.prev();
}
}while(!found)

});


Actual Problem:
This works halfway. The carousel pages are turned to the correct page (I can tell by the carousel indicator), but the visual card is not on the correct page. When I happen to click (anywhere) on the carousel, THEN the carousel zooms to the correct page. I so not know if I am missing some sort of fireEvent() or something.

Let me know if you need more information.

[arlo.carreon]

I fixed my problem. All I needed to do was call the doLayout() method of my carousel. I got this idea from another thread in the forums.



// Popup the form when you click on a marker
google.maps.event.addListener(marker, 'click', function(){

// Show the property popup window
propertyWindow.show();

// Loop through search results until you find the one that was clicked on
var found = false;
do{
if( propertyCarousel.getActiveItem().position == data.position )
{
found = true;
propertyCarousel.doLayout(); // <--- NEW LINE OF CODE
}
else
{
// Determine whether to move forward or backward on the list
if( propertyCarousel.getActiveItem().position < data.position )
{
propertyCarousel.next();
}
else
{
propertyCarousel.prev();
}
}
}while(!found)

});


Question: Why is the doLayout() method not in documentation?

http://www.sencha.com/deploy/touch/docs/?class=Ext.Carousel

I am new to ExtJS and Sencha, are there many more inherited methods to my disposal that are without documentation? If not, could someone kindly direct me in the right direction to see what other methods are available that might not be in "Sencha Touch API Documentation". Thanks.