PDA

View Full Version : list behind dockedItems and not scrolling in TabPanel



peterkuli
17 Feb 2011, 10:09 AM
My list is not scrolling properly in a TabPanel. When I scroll down, the list is going back immediately to the startposition.

Also, the list appears behind the (bottom) dockedItems, which in my case is a toolbar. It should 'stop' at the top of this toolbar, but isn't.


var list = new Ext.List({
itemTpl : '{starttime} - {endtime} - {activity}',
grouped : false,
indexBar: false,
store: store
});

var tabPanel = new Ext.TabPanel({
fullscreen: true,
scroll: 'vertical',
dockedItems: [{
dock : 'top',
xtype: 'toolbar',
title: 'PFD 2011'
}],
layout: 'fit',
tabBar:{
dock: 'bottom',
ui: 'dark',
layout: {
pack: 'center'
}
},
items:[{
title: 'Schedule',
iconCls: 'info',
items:[list],
cls: 'card1'
},{
title: 'Route',
iconCls: 'favorites',
html: 'Route',
cls: 'card2'
}]
});

ninoguba
17 Feb 2011, 10:35 AM
I'm faced with the same issue. Please post if you find a solution. Thanks.

peterkuli
17 Feb 2011, 10:42 AM
Instead of using a list, I'm now using a dataview. With this dataview I don't have the 'behind bottom toolbar' issue, neither the 'scrolling' issue.

venumobile
17 Feb 2011, 1:11 PM
I haven't tested this, but try this instead (I had the same problem until I did it this way):



var list = new Ext.List({
itemTpl : '{starttime} - {endtime} - {activity}',
fullscreen: true,
scroll: false,
layout: 'fit',
grouped : false,
indexBar: false,
store: store
});

var tabPanel = new Ext.TabPanel({
fullscreen: true,
dockedItems: [{
dock : 'top',
xtype: 'toolbar',
title: 'PFD 2011'
}],
layout: 'fit',
tabBar:{
dock: 'bottom',
ui: 'dark',
layout: {
pack: 'center'
}
},
items:[{
title: 'Schedule',
scroll: 'vertical',
fullscreen: true,
layout: 'fit',
iconCls: 'info',
items:
[list],
cls: 'card1'
},{
title: 'Route',
iconCls: 'favorites',
html: 'Route',
cls: 'card2'
}]
});

ninoguba
17 Feb 2011, 3:26 PM
I'm faced with the same issue. Please post if you find a solution. Thanks.

Found the solution. Basically you need to specify layout: 'fit' on the panel containing your scrollable list.

peterkuli
18 Feb 2011, 12:33 AM
@venumobile

I didn't test your code, but accidentally I found out that if you specifiy 'fullscreen: true' on both the list and tabPanel, I don't face the problems mentioned in my first post.

Edit: the list is still behind the bottom toolbar...but it's scrollable.

@ ninoguba
I have layout:'fit' specified on my tabPanel which contains the list...but still behind the toolbar...

Edit2:
In the items config of your tabPanel, do the following:

items:[{
title: 'title',
iconCls: 'info',
items:[listPanel],
layout: 'fit',
cls: 'card1'
}

Old McStopher
21 Jul 2011, 1:26 PM
layout: 'fit'
This does fix the issue, but be warned. If you have a toolbar as an item in your panel, be sure it is in your dockedItems: instead of your basic items:. This made my toolbar take up my whole screen and the list to not be displayed at all. Upon moving the toolbar to the dockedItems:, this layout fix worked for me.

raj.gauravmca@gmail.com
15 Dec 2011, 5:16 AM
In My case I cannot use layout fit for the Panel because there is condition use it as vbox then hoe can i resolve the same problem


"My list is not scrolling properly in a TabPanel. When I scroll down, the list is going back immediately to the startposition." Thanks