Carousel indicator dots not visible

[shellgrit]

I have a list of items, and when an item is tapped it brings up a carousel of details for the tapped item. However the indicator dots of the carousel are not visible on either card.

Note that the data store (speciesList) for this application is defined in a separate JavaScript file.


Ext.override(Ext.List, {
setGrouped: function(grouped){
this.grouped = !!grouped;
this.tpl = this.grouped ? this.groupTpl : this.itemTpl;
if(this.rendered){
if(!this.grouped){
this.el.addClass('x-list-flat');
if (this.indexBar) {
this.indexBar.hide();
}
}else{
this.el.removeClass('x-list-flat');
if(this.indexBar){
this.indexBar.show();
}
}
this.refresh();
}
}
});

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){

/***********************************************
* THE BROWSE LIST PANEL AND ASSOCIATED ITEMS *
***********************************************/

// First, define the buttons

var browseButtons = [{
xtype: 'splitbutton',
items: [{
active: true,
text: 'Name',
handler: function(){
speciesList.sort('speciesCommon', 'ASC');
browseList.indexBar.setVisible(1);
browseList.setGrouped(1);
browseList.refresh();
}
}, {
text: 'Size',
handler: function(){
speciesList.sort('speciesSize', 'ASC');
browseList.indexBar.setVisible(0);
browseList.setGrouped(0);
browseList.refresh();
}
}]
}];

// Second, define the toolbar

browseToolbar = new Ext.Toolbar({
xtype: 'toolbar',
dock: 'top',
ui: 'light',
items: browseButtons,
layout: {
pack: 'center'
}
});

// Third, define the list

var browseList = new Ext.List({
dockedItems: [ browseToolbar ],
tpl: [
'<tpl for=".">',
'<div class="browseList">',
'<img src="thumbnails/{speciesImage}.png" align="left" />',
'<p><strong>{speciesCommon}</strong></p>',
'<p>{speciesSize}cm - {speciesStatus}</p>',
'</div>',
'</tpl>'
],
itemSelector: 'div.browseList',
singleSelect: true,
indexBar: true,
grouped: true,
store: speciesList,
listeners: {
itemtap: function(view, index, item, e){
var rec = view.store.getAt(index);
browseMain.setCard(1);
browseCarousel.setCard(0);
Ext.getCmp('browseIllustration').update({
speciesCommon: rec.get('speciesCommon'),
speciesImage: rec.get('speciesImage'),
speciesDescription: rec.get('speciesDescription'),
speciesStatus: rec.get('speciesStatus'),
speciesSize: rec.get('speciesSize')
});
Ext.getCmp('browsePhoto').update({
speciesCommon: rec.get('speciesCommon'),
speciesImage: rec.get('speciesImage'),
speciesStatus: rec.get('speciesStatus'),
speciesSize: rec.get('speciesSize')
});
}
}
});

// Fourth, sort the list initially

speciesList.sort('speciesCommon', 'ASC');

/************************************************
* THE SPECIES DATA PANEL AND ASSOCIATED ITEMS *
***********************************************/

// First, define the carousel

var browseCarousel = new Ext.Carousel({
ui: 'light',
defaults: {
cls: 'card'
},
items: [{
id: 'browseIllustration',
tpl: [
'<tpl for=".">',
'<div class="browseDetail">',
'<p><strong>{speciesCommon}</strong></p>',
'<p>{speciesSize}cm - {speciesStatus}</p>',
'<img src="illustrations/{speciesImage}.jpg" /><br />',
'<p>{speciesDescription}</p>',
'</div>',
'</tpl>'
],
itemSelector: 'div.browseDetail'
},{
id: 'browsePhoto',
tpl: [
'<tpl for=".">',
'<div class="browseDetail">',
'<p><strong>{speciesCommon}</strong></p>',
'<p>{speciesSize}cm - {speciesStatus}</p>',
'<img src="photos/{speciesImage}.png" /><br />',
'</div>',
'</tpl>'
],
itemSelector: 'div.browseDetail'
}]
});

// Second, define the detail panel and toolbar

var browseDetail = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [browseCarousel],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
ui: 'dark',
items: [{
text: 'Back',
ui: 'back',
handler: function(){
browseMain.setCard(0);
}
},{
text: '\/\\',
ui: 'action',
id: 'prevButton',
disabled: true
},{
text: '\\\/',
ui: 'action',
id: 'nextButton',
disabled: true
}]
}]
});

/***********************
* THE MAIN CONTAINER *
***********************/

var browseMain = new Ext.Container({
fullscreen: true,
layout: 'card',
items:[browseList, browseDetail]
}).show();

}

});

Neil

[evant]

You have the ui set to light... white background! ;)

[shellgrit]

You are correct as usual - I'm sure I tested ui: 'dark' with the same result (but obviously not!).

Neil