PDA

View Full Version : Horizontal scroll on tab



renton
9 Sep 2010, 11:18 AM
Hi.

How can I switch on the horizontal scroll on tab if, for example, the line "aaa" (see below) is too long and it doesn't fit the width of the window?


var viewport = new Ext.Viewport({
layout: "border",
renderTo: Ext.getBody(),
items: [{
region: "north",
xtype: 'panel',
contentEl: "header-table",
height: 75,
}, {
region: 'center',
xtype: "tabpanel",
id: 'tabpanel',
activeTab: 0,
margins: '5 5 5 5',
resizeTabs: true,
tabWidth: 80,
defaults: {autoHeight: true},
autoScroll: true,
items: [{
title: 'widetab',
id: 'widetab',
html: 'aaa aaa aaa aaa aaa aaa ... aaa'
}, {
contentEl: "tab2",
title: "tab2"
}]
}]
});

Thanks in advance.

Condor
10 Sep 2010, 2:04 AM
1. Remove the autoScroll:true from the tabpanel.
2. Add autoScroll:true to the 'widetab' panel.

renton
10 Sep 2010, 2:21 AM
Thanks ;)

renton
4 Oct 2010, 7:39 AM
Well, if the string doesn't fit the window width and horizontal scroll is needed, then - yes, you have to remove autoScroll: true (screenshot 1) from tabpanel and add it to widetab.

http://js.1gb.ru/hv_scroll1.jpg

Example 1: http://js.1gb.ru/hv_scroll1.html

If the string doesn't fit the window height then you have to do the opposite, but then you'll get some horizontal scroll, which isn't needed actually (screenshot 2).

http://js.1gb.ru/hv_scroll2.jpg

Example 2: http://js.1gb.ru/hv_scroll1.html

And if the string doesn't fit both the width and the height, the you have to put both autoScroll: true, but then you'll get 3 scrolls: vertical - where is needed, some horizontal that seems to be in the place, but doesn't scroll. The needed horizontal one appears if you page down to the bottom (screenshot 3).

http://js.1gb.ru/hv_scroll3_1.jpg

http://js.1gb.ru/hv_scroll3_2.jpg

Example 3: http://js.1gb.ru/hv_scroll3.html

Actually I would like to get 2 scrolls vertical and horizontal, the last one working as usual and on the needed habitual place.

My code:

<script type="text/javascript">
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout: "border",
renderTo: Ext.getBody(),
items: [{
region: "north",
xtype: 'panel',
html: 'HEAD',
height: 75,
}, {
region: 'center',
xtype: "tabpanel",
id: 'tabpanel',
activeTab: 0,
margins: '5 5 5 5',
resizeTabs: true,
tabWidth: 80,
defaults: {autoHeight: true},
items: [{
title: 'widetab',
id: 'widetab',
autoScroll: true,
autoLoad: {
url: '1.html?' + (new Date).getTime(),
method: 'GET',
scripts: true,
}
}, {
contentEl: "tab2",
title: "tab2"
}]
}]
});
});
</script>
</head>

<body>
<div id="widetab" class="x-hide-display"></div>
<div id="tab2" class="x-hide-display"></div>
</body>
</html>