PDA

View Full Version : List IndexBar does not account for docked items



senchauser2010
6 Dec 2010, 11:46 AM
I have a panel with List and docked toolbars. A part of indexBar on the list hides behind bottom toolbar, even though there is vertical space on the top.

It seems Indexbar positioning does not factor in docked items on the view.

Please suggest if there are any workarounds.

Fredric Berling
6 Dec 2010, 12:28 PM
Can i see code?

senchauser2010
6 Dec 2010, 1:25 PM
Following is the code.

When it renders, the entries below letter "U" in the alphabetical indexBar is hidden behind the bottom toolbar as seen below. the screen shot below does not show data, but I have verified that loading actual data does not change the indexbar positioning.


23692



Ext.regApplication({
name: "myapp",
defaultTarget: "viewport",
launch: function(){
Ext.Viewport.init();
this.viewport = new myapp.views.AuthorPanel({
application: this
});
Ext.Viewport.onOrientationChange();
}
});

Ext.regStore('AuthorStore', {
model: 'Author',
root: 'authors',
getGroupString : function(record) {
return record.get('name')[0];
},
proxy: {
type: 'ajax',
url : 'data/authors.json',
reader: {
type: 'json',
root: 'authors'
}
}
});

myapp.views.AuthorList = Ext.extend(Ext.List, {
fullscreen:true,
itemTpl: '<div class="author"> {name} </div> ',
listeners: {
itemtap: function(dataview, index, item, e){
alert(dataview.store.getAt(index).get('id'));
}
},
loadingText: 'Loading Authors',
grouped: true,
indexBar: true,
singleSelect: true,
store: Ext.getStore('AuthorStore')
});




myapp.views.AuthorPanel = Ext.extend(Ext.Panel, {
title: "Authors",
fullscreen: true,
dockedItems: [
{
dock: 'top',
xtype: 'toolbar',
title: 'Authors',
items: [ {
ui: 'back',
text: 'Back',
handler: function() {}
}],

},
{
dock: 'bottom',
xtype: 'toolbar',
items: [ {
ui: 'back',
text: 'Back',
handler: function() {}
}],

}
],
items: [ new myapp.views.AuthorList() ]
});

mrsunshine
6 Dec 2010, 2:37 PM
you can remove letters from the index as workaround


indexBar: {
// direction: 'horizontal',
letters: ['a', 'z']
},

senchauser2010
6 Dec 2010, 2:46 PM
you can remove letters from the index as workaround


indexBar: {
// direction: 'horizontal',
letters: ['a', 'z']
},



Sorry didn't quite get that... I hope you are not suggesting to remove the letters which are hidden since otherwise it defeats the purpose of having the indexbar. Fyi, my data is going to have names starting from all the letters so I don't have any unused ones if that's what you meant.

mrsunshine
6 Dec 2010, 2:51 PM
if you need all letters that want work ;-)

you have also the option to render it horizontal (direction: 'horizontal') but this themes to be buggy as well in st 1.0.1 cause its rendered vertical as well ;-( will post this as bug

senchauser2010
6 Dec 2010, 5:47 PM
Thanks. I had originally posted this in Bugs forum but was moved to this one.

BTW, not sure if this issue is linked to this bug (http://www.sencha.com/forum/showthread.php?117830-OPEN-638-quot-Fullscreen-quot-list-height-doesn-t-compensate-for-toolbar).