Table layout Scrolling

Published by: jack 2008-11-29

I use a viewport with layout set to table.
How can I set that autoscroll in the viewport?

You'll have to use:

new Ext.Viewport({
layout:'fit',
items:[{
layout:'table',

Non-scrolling table header, repeat print header and footer::
table { table-layout: fixed } thead td{ position:relative; Table footer repeats on print Back to Non-Scroll Table Header — X-browser.
http://home.tampabay.rr.com/bmerkey/examples/nonscroll-table-header3.htmlHOME

autoScroll:true,
id: 'main-panel',
layoutConfig: {columns:5},
items: [Ext.apply(new QuoteGrid(), {
title: 'Item 1',
colspan: 2,
tools: tools
}),{
title: 'Item 2',
colspan: 3
}]
}]
});

ps. Are you sure you don't want a normal (non-scrolling) Viewport?

Mi code is this

var viewport = new Ext.Viewport({
layout:'table',
id: 'main-panel',
layoutConfig: {columns:5},
items: [
Ext.apply(new QuoteGrid(), {
title: 'Item 1',
colspan: 2,
tools: tools
}),{
title: 'Item 2',

Myspace layouts, Myspace resources, Myspace graphics and codes::
Oct 29, 2008 Collection of MySpace layouts, MySpace graphics, MySpace layout codes, Backgrounds: Background Categories Animated Backgrounds Table
http://www.bigoo.ws/HOME

colspan: 3
}]
});

I have a grid panel inside the TableLayout viewport
If I must define a panel inside the viewport then I must add the grid panel to the panel

But in this way I define a panel inside another panel

Not really, a viewport isn't a panel. It just adds an extra div around your table.

I have a problem with grid panel on IE7.
My grid is enormous if don't set the width.

var viewport = new Ext.Viewport({
layout:'fit',
items:[{
layout:'table',
autoScroll:true,
id: 'main-panel',
layoutConfig: {columns:3},
items: [

{
rowspan: 2,
colspan:1,
width:402,
height:height,
contentEl: 'sitepal'
},{
title:"Item 2",
html: '

',
rowspan: 2,
colspan:1,
tools: tools,
height:height
},{
title:"Item 3",
html: '

',
colspan:1,
tools: tools,
height:halfheight
},{
title:"Item 4",
html: '

Cell D content

',
colspan:1,
tools: tools,
height:halfheight
},
Ext.apply(new QuoteGrid(), {
title: 'Item 1',
colspan: 1,
height:height,
tools: tools
})
,{
title:"Item 3",
html: '

',
colspan:1,
tools: tools,
height:height
},{
title:"Item 3",
html: '

',
colspan:1,
tools: tools,
height:height
}]
}]
});

In FF all works fine.

Ext.Viewport doesn't support autoScroll. You'll have to set the viewport to layout:'fit', add a panel with autoScroll:true and layout:'table'