Horizontal Scroll in card layout

[ananthbhaskar]

Hi,

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!!

[ananthbhaskar]

Any help on this issue, will be appreciated!! Please share your knowledge.

Thanks!!

[skirtle]

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.

[ananthbhaskar]

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!!

Thanks!!

[skirtle]

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.