PDA

View Full Version : TabPanel autoHeight and vertical scroll



vicentiu
30 Nov 2010, 4:10 AM
Hi,

I have a tab panel and the content of each tab has the height bigger than the height of the screen. I want to have vertical scroll on each tab to see the entire content. Instead of that, the content is cut to the screen size and I'm not able to scroll

Thank you

vicentiu
3 Dec 2010, 12:22 AM
Here is the source code:



Ext.ns('mobileQL');
var panel;
//array of pages
var activeItems=[];


var tabs = new Ext.TabPanel({
sortable: true,
ui: 'dark',
autoScroll:true,
height: 1500,
//fullscreen:true,
autoHeight: true,
scroll: 'vertical',
items: [
{
title: 'Dollar',
html: 'Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>XXXXXXXXXXXXXXXXXX'
}]
});

mobileQL.quotesPanel = new Ext.Panel({

autoScroll:true,
scroll: "vertical",
autoHeight: true,
title:"Quotes",
items:tabs
});

mobileQL.Main = {
init : function() {
function menuHandler(pButton, pEvent)
{
var index=0;
switch(pButton.text)
{
case "Quotes":
index=0;
break;
case "Settings":
index=1;
break;
case "About":
index=2;
break;
}

panel.setCard(index,{type: 'slide', direction: 'left'});
activeItems = [];

var dockedItems = panel.getDockedItems();
dockedItems[0].setTitle(pButton.text);

//back button hide
var header = dockedItems[0];
header.getComponent(0).hide();
}

panel = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [mobileQL.quotesPanel, mobileQL.settingsPanel, mobileQL.aboutPanel],
dockedItems:
[{
cls:"header",
xtype: 'toolbar',
dock: 'top',
title:'QL',
items: [{
text: 'Back',
ui: 'back',
hidden:true,
handler: function() {
var card = activeItems.pop();
panel.setCard(card,{type: 'slide', direction: 'right'});

var dockedItems = panel.getDockedItems();
dockedItems[0].setTitle(card.title);
if(activeItems.length<=0){this.hide();}
}
}]
},
{
xtype: 'toolbar',
dock: 'bottom',
align:'center',
layout: {
pack: 'center'
},
items: [
{
xtype:"button",
text:"Quotes",
handler:menuHandler,
cls:"menuButton1"
},
{
xtype:"button",
text:"Settings",
handler:menuHandler ,
cls:"menuButton2"
//iconCls: 'settings'
},

{
xtype:"button",
text:"About",
handler:menuHandler,
cls:"menuButton4"
}
]
}
]
});
}
}

Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
mobileQL.Main.init();
}
});

vicentiu
3 Dec 2010, 12:33 AM
Here is the source code:


Ext.ns('mobileQL');
var panel;
//array of pages
var activeItems=[];

var tabs = new Ext.TabPanel({
sortable: true,
ui: 'dark',
autoScroll:true,
height: 1500,
//handler: onTapHandler,
//fullscreen:true,
autoHeight: true,
scroll: 'vertical',
items: [
{
title: 'Dollar',
html: 'Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab'
}]
});

mobileQL.quotesPanel = new Ext.Panel({

autoScroll:true,
scroll: "vertical",
autoHeight: true,
title:"Quotes",
items:tabs
});

;

mobileQL.Main = {
init : function() {
function menuHandler(pButton, pEvent)
{
var index=0;
switch(pButton.text)
{
case "Quotes":
index=0;
break;
case "Settings":
index=1;
break;
case "About":
index=2;
break;
}

panel.setCard(index,{type: 'slide', direction: 'left'});
activeItems = [];

var dockedItems = panel.getDockedItems();
dockedItems[0].setTitle(pButton.text);

//back button hide
var header = dockedItems[0];
header.getComponent(0).hide();
}

panel = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [mobileQL.quotesPanel, mobileQL.settingsPanel, mobileQL.aboutPanel],
dockedItems:
[{
cls:"header",
xtype: 'toolbar',
dock: 'top',
title:'MobileQL',
items: [{
text: 'Back',
ui: 'back',
hidden:true,
handler: function() {
var card = activeItems.pop();
panel.setCard(card,{type: 'slide', direction: 'right'});

var dockedItems = panel.getDockedItems();
dockedItems[0].setTitle(card.title);
if(activeItems.length<=0){this.hide();}
}
}]
},
{
xtype: 'toolbar',
dock: 'bottom',
align:'center',
layout: {
pack: 'center'
},
items: [
{
xtype:"button",
text:"Quotes",
handler:menuHandler,
cls:"menuButton1"
},
{
xtype:"button",
text:"Settings",
handler:menuHandler ,
cls:"menuButton2"
//iconCls: 'settings'
},

{
xtype:"button",
text:"About",
handler:menuHandler,
cls:"menuButton4"
}
]
}
]
});
}
}

Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
mobileQL.Main.init();
}
});

Yazla
3 Dec 2010, 4:07 AM
Hi, try something like this:


var tabs = new Ext.TabPanel({
sortable: true,
ui: 'dark',
fullscreen: true,
items: [
{
title: 'Dollar',
scroll: 'vertical',
html: 'Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>XXXXXXXXXXXXXXXXXX'
}]
});


And don't overuse properties, just try to read carefully about each of them and apply them correctly.


Cheers.

vicentiu
3 Dec 2010, 5:42 AM
Thank you, it works.
Regards,
Vicentiu

Troy Wolf
4 Oct 2011, 9:00 AM
Really? The solution worked? These properties aren't even listed as valid properties in the documentation:

fullscreen
scroll

I am having what I think is the same issue, but struggling to resolve. I have a TabPanel and some tabs have contents longer than the container. I want a vertical scrollbar, but can't seem to get one. I'm sure I'll get if figured out eventually, but this solution did not work for me. ~o)

anthoang
19 Jan 2012, 6:20 PM
the scroll:'vertical' property didn't work for me.
but since this tab panel only has html, you could try to include the property xtype:'list' instead.
it worked for me. see below,



var tabs = new Ext.TabPanel({
sortable: true,
ui: 'dark',
fullscreen: true,
items: [
{
title: 'Dollar',
xtype: 'list',
///scroll: 'vertical', <- not needed
html: 'Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>Tab 3<br/>XXXXXXXXXXXXXXXXXX'
}]
});