PDA

View Full Version : Problem using indexBar in a List inside a TabPanel



jonide
9 Feb 2011, 1:59 PM
I have a TabPanel with tabBar docked to the bottom of the screen. Within one of the tabs, I have a List, grouped, with indexBar: true.

When I open the app, the indexBar is showing on all tabs, not just the one that contains the list.

24641

If I go to the tab that has the list, it looks correct.

24639

If I then go to any other tab, the indexBar no longer shows on the tabs where it shouldn't.

24640

Is this a bug? Or am I doing something wrong?

My code:



Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var contactsStore = new Ext.data.JsonStore({
model : 'Contact',
sorters: 'lastName',

getGroupString : function(record) {
return record.get('lastName')[0];
},

data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
});

var contactsList = new Ext.List({
fullscreen: true,
itemTpl : '{firstName} {lastName}',
grouped : true,
indexBar: true,
store: contactsStore
});

var tabPanel = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: { pack: 'center' }
},
ui: 'dark',
cardSwitchAnimation: {
type: 'slide'
},
layoutOnTabChange: true,
activeTab: 0,
items: [
{ xtype: 'container', iconCls: 'bookmarks', title: 'Workspaces', items: [] },
{ xtype: 'container', iconCls: 'favorites', title: 'My Files', items: [] },
{ xtype: 'container', iconCls: 'download', title: 'Notifications', items: [] },
{ xtype: 'container', iconCls: 'team', title: 'Contacts', items: [ contactsList ] },
{ xtype: 'container', iconCls: 'settings', title: 'Settings', items: [] }
]
});


Thanks!

Riaz
9 Feb 2011, 3:36 PM
it makes sense to me. Other tabs did not connect with any Ext.List. Without List how can indexBar will show. Am I correct?

Riaz
9 Feb 2011, 4:27 PM
I have modify your code. if it is helpful, please inform me. Modified code is



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


//Set File data
Ext.regModel('File', {
fields: ['FileNo', 'FileName']
});

var FileStore = new Ext.data.JsonStore({
model: 'File',
sorters: 'FileName',

getGroupString: function (record) {
return record.get('FileName');
},

data: [
{ FileNo: 'A', FileName: 'ABC1' },
{ FileNo: 'B', FileName: 'ABC2' },
{ FileNo: 'C', FileName: 'ABC3' },
{ FileNo: 'A', FileName: 'ABC4' },
{ FileNo: 'B', FileName: 'ABC5' },
{ FileNo: 'C', FileName: 'ABC6' },
{ FileNo: 'A', FileName: 'ABC7' },
{ FileNo: 'B', FileName: 'ABC8' },
{ FileNo: 'C', FileName: 'ABC9' },
]
});

var FileList = new Ext.List({
fullscreen: true,
iconCls: 'favorites',
title: 'My Files',
itemTpl: '{FileNo} {FileName}',
grouped: true,
indexBar: true,
store: FileStore
});



//Set Contact data
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});



var contactsStore = new Ext.data.JsonStore({
model: 'Contact',
sorters: 'lastName',

getGroupString: function (record) {
return record.get('lastName')[0];
},

data: [
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Rob', lastName: 'Dougan' },
{ firstName: 'Ed', lastName: 'Spencer' },
{ firstName: 'Jamie', lastName: 'Avins' },
{ firstName: 'Aaron', lastName: 'Conran' },
{ firstName: 'Dave', lastName: 'Kaneda' },
{ firstName: 'Michael', lastName: 'Mullany' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jay', lastName: 'Robinson' }
]
});

var contactsList = new Ext.List({
fullscreen: true,
iconCls: 'team',
title: 'Contacts',
itemTpl: '{firstName} {lastName}',
grouped: true,
indexBar: true,
store: contactsStore
});

var tabPanel = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: { pack: 'center' }
},
ui: 'dark',
// cardSwitchAnimation: {
// type: 'slide'
// },
// layoutOnTabChange: true,
//activeTab: 0,
items: [
{ iconCls: 'bookmarks', title: 'Workspaces' },
FileList,
{ xtype: 'container', iconCls: 'download', title: 'Notifications'},
contactsList,
{ xtype: 'container', iconCls: 'settings', title: 'Settings' }
]
});



}

});

jonide
10 Feb 2011, 9:25 AM
Yes, that fixes it. Thanks! I wish I understood better why my code was incorrect. It seems to me that it's more logical to define iconCls in the tabPanel items, rather than in the list itself. What if a given list were used in more than one context, for example? But, that said, I really appreciate the response, and I will use it. Thanks again.