Extjs how to make scrollbar?

Question

I need to show the scroll bar as soon as the shape is wider than the container. I set the autoScroll: true property in the container, but it does not work. In any case, to get the result I need?

Here is a working example

http://jsfiddle.net/mQC3B/2/

Code

Ext.create('Ext.container.Viewport', { layout: { header: false, type: 'border', padding: 0 }, items: [{ region: 'north', padding: '0 150 0 150', height: 36, html: 'header' }, { id:'mainPanelContainer', autoScroll: true, padding: '0 150 0 150', region: 'center', items:[ { xtype:'form', items:[{ xtype: 'container', flex: 1, layout: 'anchor', items: [{ xtype: 'textfield', fieldLabel: 'Name', name: 'Name' }, { xtype: 'textfield', fieldLabel: 'Name', name: 'Name' }, { anchor: '95%', xtype: 'htmleditor', fieldLabel: 'Popis', name: 'Description', height: 240, width: 450 }] }, { xtype: 'container', flex: 1, layout: 'anchor', items: [{ xtype: 'textfield', fieldLabel: 'Name', name: 'Name' }, { xtype: 'textfield', fieldLabel: 'Name', name: 'Name' }, { xtype: 'textfield', fieldLabel: 'Name', name: 'Name' }, { xtype: 'container', margin: '0 0 8 0', layout: 'hbox', items: [{ xtype: 'textfield', fieldLabel: 'Name', name: 'Name' }, { xtype: 'textfield', fieldLabel: 'Name', name: 'Name' }] }, { xtype: 'textfield', fieldLabel: 'Name', name: 'Name' }] }] } ] }, { region: 'south', height: 25, padding: '0 150 0 150', html: 'Copyright © 2013' }] }); 

EDIT

After adding the layout: "fit" to mainPanelContainer, a scroll bar appears, but it is impossible to scroll to the hidden right side of the form.

http://jsfiddle.net/mQC3B/3/

Answer 1

In your fiddle, for your editing, change:

 padding: '0 150 0 150', 

in the central area:

 margin: '0 150 0 150', 

Believe it or not, extjs layouts do not handle the padding property very well. I came across this before with my layouts. It seems that in your example, margin will work to achieve what you want. Another way to achieve the same result is to untie another level with the border layout and add eastern and western areas with empty space to simulate the indentation behavior.

Answer 2

autoScroll: true is a way to do this, but you need all your layouts to work correctly. Try putting layout: 'fit' on your mainPanelContainer and / or your form .

Answer 3

Basically, you just need to add the autoScroll property, for example:

 autoScroll: true 

Answer 4

if you delete the nested form and just put the indentation in the shared container (viewport in this example), it looks like you will get what you understand, what I understand.

http://jsfiddle.net/mQC3B/15/

 Ext.create('Ext.container.Viewport', { padding: '0 150 0 150', layout: { header: false, type: 'border' }, items: [{ region: 'north', height: 36, html: 'header' }, { id: 'mainPanelContainer', autoScroll: true, region: 'center', xtype: 'form', items: [{ xtype: 'container', flex: 1, layout: 'anchor', items: [{ xtype: 'textfield', fieldLabel: 'Name', name: 'Name' }, { xtype: 'textfield', fieldLabel: 'Name', name: 'Name' }, { anchor: '95%', xtype: 'htmleditor', fieldLabel: 'Popis', name: 'Description', height: 240, width: 450 }] }, { xtype: 'container', flex: 1, layout: 'anchor', items: [{ xtype: 'textfield', fieldLabel: 'Name', name: 'Name' }, { xtype: 'textfield', fieldLabel: 'Name', name: 'Name' }, { xtype: 'textfield', fieldLabel: 'Name', name: 'Name' }, { xtype: 'container', margin: '0 0 8 0', layout: 'hbox', items: [{ xtype: 'textfield', fieldLabel: 'Names', name: 'Name' }, { xtype: 'textfield', fieldLabel: 'Name', name: 'Name' }] }, { xtype: 'textfield', fieldLabel: 'Name', name: 'Name' }] }] }, { region: 'south', height: 25, html: 'Copyright © 2013' }] });