View Full Version : Horizontal Scroll in card layout

23 Aug 2011, 1:25 AM

I need to have a horizontal scroll bar in the panel, which is not working after setting "autoScroll: true".

Can anyone throw some information/ example on the same.
Sample Code:

var Panel1 = new Ext.Panel({ id: Panel1', title: '', height: 200, autoScroll: true, forceFit: false

var Panel2 = new Ext.Panel({
id: Panel2', title: '',
layout: 'column', height: 400, scroll: 'horizontal', autoScroll: true, forceFit: false//, width: 1500
, defaults: { layout: 'form', xtype: 'panel', bodyStyle: 'padding:5px', border: false
}, items: [......]

var testPanel = new Ext.Panel({
id: 'testPanel'
, region: 'south'
, collapsible: true
, title: 'test'
, collapsed: true
, scroll: 'horizontal'
, animCollapse: false
, height: 350
, width: 350
, autoScroll: true
// , viewConfig: { autoScroll: true, forceFit: false }
, layoutConfig:{ autoWidth:false}
, layout: 'card'
, bodyStyle: 'padding:3px;'
, items: [Panel1, Panel2]

Thanks in advance!!

23 Aug 2011, 7:58 PM
Any help on this issue, will be appreciated!! Please share your knowledge.


26 Aug 2011, 11:10 PM
It isn't clear from your description exactly what you want it to do. autoScroll: true will only show a scrollbar if something is too big for its container and this is not the case in your code sample.

31 Aug 2011, 8:59 PM
Hi Skirtle,

Thanks for your reply!!

I have approximately 40 controls [label +textbox ] in the panel2. When I use the column layout in the panel2 then the horizontal scroll is not appearing and it is trying to fit in the available space, so the scroll bar is not appearing.

When I change the panel2 to table layout [layout: 'table'] the controls in the panel2 is not appearing, later I found out that the "testpanel" config [collapsed: true] is causing the controls not to appear. When I removed the "collapsed: true" in the testpanel, the panel2 is always appearing and the control and values are populated correctly.

I need to switch to panel1, when I don't populate any values. When I populate the values then I need to collapse the panel1 and expand the panel2.

when I make collapsed: true in the config, Why the controls are not getting loaded in panel2?

I tried without card layout, table layout in panel2 and add the panel1 and panel2 dynamically but am getting DOM error.

Let me know if you need more information to help me better!!


1 Sep 2011, 1:46 PM
I'm struggling to follow the problem you're describing. Could you post a short code example that demonstrates exactly what the problem is? As far as I can tell your original example works perfectly once the syntax errors are corrected.