PDA

View Full Version : Last list item hidden behind TabBar



imwill
5 Sep 2011, 12:36 AM
I've got some problem with my list view and a TabBar. The last item of my list is hidden behin my TabBar.
Would be great if someone could have a look at my source...I left out the jsonStore etc. to fill the list.
I think it is a problem with the layout configuration.

My Viewport.js:


App.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
id: 'viewport',
style: 'background-color: #fee;',
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
}
});

Ext.apply(this, {
items: [
App.views.ListPanel1,
App.views.Panel2,
App.views.Panel3,
App.views.Panel4,
App.views.Panel5,
]
});
App.views.Viewport.superclass.initComponent.apply(this, arguments);
}

});




My ListPanel1.js

App.views.ListPanel1 = Ext.extend(Ext.Panel, {
id: 'ListPanel1',
title: 'ListPanel1',
layout: 'card',
iconCls: 'bookmarks',
cardSwitchAnimation: 'slide',
initComponent: function() {

this.textTitle = [{
xtype: 'toolbar',
title: 'ListPanel1',
flex: 1,
ui: 'light'
}];

this.sb = new Ext.SegmentedButton({
defaults:{
xtype:'button',
scope:this,
flex: 1
},
width: '90%',
items:[
{id:'31/08/2011',text:'31/08/2011.', handler: this.changeDate},
{id:'01/09/2011',text:'01/09/2011.', handler: this.changeDate}
],
cls:'day-selector'
});


this.titlebar = [new Ext.Toolbar({
xtype: 'toolbar',
layout: {pack: 'justify', align : 'center'},
ui: 'light',
dock: 'top',
items: this.textTitle
})];

this.buttonbar = new Ext.Toolbar({
xtype: 'toolbar',
ui: 'light',
layout: { pack: 'center' },
items: this.sb
});

this.list = new Ext.List({
fullscreen: true,
cls: 'session-list',
itemSelector: 'div.schedule',
itemTpl: tpl,
grouped:true,
store: this.jsonStore
});

this.listWrapper = new Ext.Panel({
fullscreen: true,
id: 'listwrapper',
items: this.list,
dockedItems: this.buttonbar
});

this.main = new Ext.Panel({
dockedItems: this.titlebar,
id: 'sessionlist',
items: [
{
xtype:'container',
layout:'vbox',
items: [
this.listWrapper
]
}
]
});

this.items = [this.main];
App.views.ProgrammPanel.superclass.initComponent.apply(this,arguments);
}
});

If I scroll down the last item of the list will be hidden:
27847


If I pull up the list and keep touching it I can see the hidden list item:
27848

imwill
5 Sep 2011, 1:39 PM
I fixed it myself. Here is how I did it:

Only the Viewport got config option fullscreen: true.
I also put all elements which I wanted to store in a panel into a Container with config option layout: 'fit'.


this.main = new Ext.Container({
id: 'programm-liste',
dock: 'top',
layout: 'fit',
dockedItems: [this.dockedItems],
items: [this.list]
});