PDA

View Full Version : How to make toolbar / tabbar to scroll



d2ncal
23 Jul 2010, 6:13 PM
Hi,

I want to do a layout like this:
21645

Top: toolbar
Middle: Panel with card layout
Bottom: tabbar

This looks fine. However, I want the top and bottom toolbars to be not docked. So, the center panel can get its full vertical height depending on how many records it has, and if the user scrolls down, the top toolbar will go away (scroll away). Same thing for bottom toolbar. Currently, they are permanently visible on the screen.

I have been trying to get this to work, but in vain :-/

meyerovb
24 Jul 2010, 12:50 PM
Typing this on my iPad on a long bus ride, so no idea if the flex property will effectively push the bottom toolbar down if the list has only one item. Let me know if it works :)



var tabbar1={xtype:'tabbar', items:...};
var tabbar2={xtype:'tabbar', items:...};
var list={xtype:'list', flex:1, items:...};
new Ext.Panel({items:[tabbar1, list, tabbar2], scroll:'vertical'});

lansea
25 Jul 2010, 1:17 AM
Hi meyerovb
I try your code like


Ext.setup({ onReady: function () {
var tabbar1={xtype:'tabbar', items: [
{ iconCls: 'bookmarks', title: 'Bookmarks' },
{ iconCls: 'download', title: 'Download' }
]};

var tabbar2={xtype:'tabbar', items: [
{ iconCls: 'bookmarks', title: 'Bookmarks' },
{ iconCls: 'download', title: 'Download' },
{ iconCls: 'favorites', title: 'Favorites' }
]};
var test = {
html: 'test'
};
var list={xtype:'list', flex:1, items: [test, test, test]};
new Ext.Panel({items:[tabbar1, list, tabbar2], scroll:'vertical'});
}
});


But display nothing!

meyerovb
25 Jul 2010, 3:26 AM
Make then panel fullscreen:true

lansea
25 Jul 2010, 6:28 AM
I add fullscreen:true, but still display nothing, when I change xtype:'tabbar' to xtype:'toolbar', it display only fullscreen one toolbar, no list.

Ext.setup({ onReady: function () {
var tabbar1={xtype:'tabbar', items: [
{ iconCls: 'bookmarks', title: 'Bookmarks' },
{ iconCls: 'download', title: 'Download' }
]};

var tabbar2={xtype:'tabbar', items: [
{ iconCls: 'bookmarks', title: 'Bookmarks' },
{ iconCls: 'download', title: 'Download' },
{ iconCls: 'favorites', title: 'Favorites' }
]};
var test = {
html: 'test'
};
var list={xtype:'list', flex:1, items: [test, test, test]};
new Ext.Panel({fullscreen: true,layout: 'fit',items:[tabbar1, list, tabbar2], scroll:'vertical'});
}
});

evant
25 Jul 2010, 5:19 PM
Because you've used a fit layout!



This is a base class for layouts that contain a single item that automatically expands to fill the layout's container. This class is intended to be extended or created via the layout:'fit' Ext.Container.layout config, and should generally not need to be created directly via the new keyword.


You want a vbox layout.

lansea
26 Jul 2010, 4:23 AM
Great, the follow code is work,Thanks evant and meyerovb.


Ext.setup({ onReady: function () {
var tabbar1={xtype:'toolbar', items: [
{ iconCls: 'bookmarks', title: 'Bookmarks' },
{ iconCls: 'download', title: 'Download' }
]};

var tabbar2={xtype:'toolbar', items: [
{ iconCls: 'bookmarks', title: 'Bookmarks' },
{ iconCls: 'download', title: 'Download' },
{ iconCls: 'favorites', title: 'Favorites' }
]};
var test = {
html: 'test'
};
var list={xtype:'list', flex:1, items: [test, test, test]};
new Ext.Panel({fullscreen: true,layout: 'vbox',items:[tabbar1, list, tabbar2], scroll:'vertical'});
}
});

d2ncal
26 Jul 2010, 5:57 PM
The above code still scrolls just the list part, toolbars are still docked and always stay visible. I want the whole page to scroll, so the top and bottom toolbars can be scrolled away. I have tried an infinite number of combinations, but in vain :(.