indexBar is displayed on load and remains until it is used.

[nrevelle]

I have a card layout application with multiple lists, only one uses an indexBar. The list with the indexBar is not displayed by default (so not sure why the indexBar is even rendedered at load) but the indexBar displays and until I switch to the card with that list and use the indexBar it will not hide.

Minimized test version:
http://revelleweb.net/dev/sencha/test.html



Ext.namespace('CONF');

Ext.regModel('Session', {
fields: ['id', 'phid', 'title', 'descr', 'room','day','favorite', 'datetime', 'timesort', 'fname', 'lname','hp']
});


CONF.DailySchedule = function(config){
superConfig = {
filterType : config.filterType,
filterValue : config.filterValue,
store: config.store,
title: config.title,
layout: Ext.is.Phone ? 'fit' : {type: 'vbox', align: 'center', pack: 'center'},
items: [{
xtype: 'list',
fullscreen: true,
store: config.store,
itemTpl: config.itemTpl || '<div class="session"><b>{title}</b><br/>{room}</div>',
grouped: config.grouped || true,
indexBar: config.indexBar || false,
listeners:{itemtap:{fn:this.itemtap, scope:this}}
}],
listeners:{activate:{fn:this.refresh, scope:this}}
}
CONF.DailySchedule.superclass.constructor.call(this,superConfig);
}
Ext.extend(CONF.DailySchedule,Ext.Panel,{

itemtap : function(dv, index, item, e) {

},

refresh : function(){
if(this.filterType){
this.store.clearFilter(true);
this.store.filter(this.filterType, this.filterValue);
}
}

});
Ext.reg('conf-schedule', CONF.DailySchedule);


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
CONF.Sessions = new Ext.data.Store({
model: 'Session', sorters: [{property : 'timesort', direction: 'ASC'},{property : 'title', direction: 'ASC'}],
getGroupString : function(record) {
return record.get('datetime');
},
data: sessiondata
});

CONF.Authors = new Ext.data.Store({
model: 'Session', sorters: [{property : 'lname', direction: 'ASC'},{property : 'fname', direction: 'ASC'}],
getGroupString : function(record) {
return record.get('lname')[0]
},
data: sessiondata
});
CONF.Authors.filter("hp", "1");

CONF.ui = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [
new Ext.TabPanel({
tabBar: {dock: 'bottom', layout: {pack: 'center'}},
fullscreen: true,
cardSwitchAnimation: {type: 'slide', cover: true},
defaults: {scroll: 'vertical'},
items: [
{title: 'Sponsors',html: 'Sponsors',iconCls: 'settings'},
{xtype:'tabpanel', title: 'Schedule',iconCls: 'favorites', layout: Ext.is.Phone ? 'fit' : {type: 'vbox', align: 'center', pack: 'center'},items:[
{xtype:'conf-schedule', title:'Fri', filterType:'day', filterValue:"1", store: CONF.Sessions, indexBar: false},
{xtype:'conf-schedule', title:'Sat', filterType:'day', filterValue:"2", store: CONF.Sessions, indexBar: false},
{xtype:'conf-schedule', title:'Sun', filterType:'day', filterValue:"3", store: CONF.Sessions, indexBar: false}
]},

{xtype:'panel', title:'Speakers', iconCls: 'settings', layout: Ext.is.Phone ? 'fit' : {type: 'vbox', align: 'center', pack: 'center'},items:[
{xtype:'conf-schedule', store: CONF.Authors, indexBar: true, itemTpl:"{fname} {lname}"}
]},
{title: 'Sponsors',html: 'Sponsors',iconCls: 'settings'},

]
})
]
});
CONF.ui.setActiveItem(0);
}
})

[salon software stephen]

We're having the same problem.

We have explicitly declared the indexBar to be false on all lists/panels except for the one we want it on which we declared true.

We even tried applying it to the Ext.setup

Nothing seems to get rid of it until we go to the one page which is supposed to have it, then it vanishes from the other pages.

[hyperlinked]

I'm having the same problem here. I have one of five panels that uses the indexbar and that panel is not the panel that is in the viewport when the app loads.

Much like the original poster reported, the indexbar only goes away when you switch to the card that has the indexbar in the panel and then switch out to another card. Once you do this, the indexbar stops appearing when it's not supposed to.

The only other way I can keep the indexbar from appearing in the viewport when the app is loaded is by setting the "grouped" parameter for the indexbar's list panel to be false. If there's no grouping, the indexbar does not appear. Of course, with no grouping, there's no indexbar either.

When the indexbar is appearing and you have the list associated with the indexbar defined as a grouped list, the grouping headers also appear if you try to use the indexbar.

[hyperlinked]

I've found a suitable workaround for this issue. Here's some sample code that's using the Disclosure List from the Kitchen Sink demo. You can hide the panel that contains the list when everything is initialized and then show it when the card is brought to the front of the viewport. Don't hide the list component inside the panel. Hide the container panel. The list gets all screwed up if you hide it and show it again.



// set listbody as a global variable so that the setIndexbar method can access it.
var listbody;


DemoApp.views.ContactsApp = Ext.extend(Ext.Panel, {
contactsStore: Ext.emptyFn,
showMyList: function() {
listbody.show();
},
initComponent: function() {
this.myList = new Ext.List({
width: Ext.is.Phone ? undefined : 300,
height: 500,
xtype: 'list',
onItemDisclosure: function(record, btn, index) {
Ext.Msg.alert('Tap', 'Disclose more info for ' + record.get('firstName'), Ext.emptyFn);
},
store: this.contactsStore,
itemTpl: '<div class="contact"><strong>{firstName}</strong> {lastName}</div>',
grouped: true,
id: 'myList',
indexBar: true
});

listbody = new Ext.Panel({
fullscreen: true,
title: 'Grouped',
layout: Ext.is.Phone ? 'fit' : {
type: 'vbox',
align: 'center',
pack: 'center'
},
cls: 'demo-list',
items: [this.myList]
}).hide();

// We hide the panel that the grouped list is in. The list component itself does
// not appear to respond well to being hidden. The list dimensions and the indexbar
// will not behave normally if you hide the list instead of the panel.
listbody.hide();

this.items =[listbody];


DemoApp.views.ContactsApp.superclass.initComponent.call(this);
}
}
);


Then in a controller class I have the following function attached to a listener to reveal the list's panel when an action is fired



'launchContacts': function(options) {
DemoApp.views.viewport.setActiveItem(DemoApp.views.contactsApp, {type:'fade', easing: 'ease', duration: 1000});
DemoApp.views.ContactsApp.prototype.showMyList();
}

[hyperlinked]

I may have figured out the root cause of this problem. This was a problem with another card in my stack which was a carousel that had the position indicator at the bottom. When the app loaded, the navigation items from other cards were showing through.

It was a problem with improperly defined layout parameters. My problem was that I did not define each of my card panels with layout: 'fit'. This simple omission led to all sorts of secondary problems which included content overflowing visible space, lists that wouldn't scroll, and extra navigation items showing through to the top card.

Here's the thread that tipped me off to the issue:
http://www.sencha.com/forum/showthread.php?135538-My-List-will-not-scroll-down-it-always-pops-back-up