How to make horizontal scroll bar visible only when it is needed?

Question

I want vertical scroll bar and horizontal scroll bars only when they are needed(for eg. screen is minimized), so I wrapped my main panel into a panel having autoScroll property true and that in turn into a panel having layout: fit . Now the vertical scroll bar appears only when needed but horizontal scroll bar doesn't appear.

What can be the way to make the horizontal scroll bar too appear when needed? Any help would be appreciated.

Please find my code below:

Ext.define('ORT.view.survey.wizard.StepTemp3', {
extend: 'Ext.form.Panel',

alias : 'widget.surveywizardsteptemp3',

title: 'Survey Wizard - Step temp 3',

id : 'surveyWizardtemp3',

layout:'fit',

items:[{
    xtype:'panel',
    autoScroll:true,
    border:false,
    items:[{
        xtype:'panel',
        border:false,
        layout: {
            type: 'vbox',
            align:'stretch'
        },
        items:[{
            border: false,
            margin:10,
            layout:{
                type: 'hbox',
                align: 'top',
                pack: 'start'
            },
            defaults:{margins:'0 10 0 0'},

            items:[{
                flex:1,
                border: false,
                cls: 'blueSurveyBox',
                layout:{
                    type:'vbox',
                    align: 'stretch',
                    padding:'10 5 0 10'
                },
                defaults:{margins: '0 0 15 0'},
                items:[{
                    border: false,
                    layout:{
                        type:'hbox',
                        align:'top'
                    },
                    items:[{
                        border: false,
                        xtype:'label',
                        text:'Survey Title - ',
                        cls: 'labelBig',
                        width: 85
                    },{
                        border: false,
                        xtype:'label',
                        text:'Popular Radio Station',
                        cls: 'labelBigBold',
                    }]      
                },{
                    border: false,
                    layout:{
                        type:'hbox',
                        align:'top'
                    },
                    items:[{
                        border: false,
                        xtype:'label',
                        text:'Category - ',
                        cls: 'labelBig',
                        width: 85
                    },{
                        border: false,
                        xtype:'label',
                        text:'Community',
                        cls: 'labelBigBold',
                    }]      
                }]      

            },{
                flex:1,
                border: false,
                cls: 'blueSurveyBox',
                layout:{
                    type:'hbox',
                    align:'top',
                    pack:'center'
                },
                items:[{
                    flex:1,
                    border: false,
                    layout:{
                        type:'hbox',
                        padding:'10 10 15 10'
                    },
                    defaults:{margin:'0 10 0 0'},
                    items:[{
                        border:false,
                        layout:{
                            type:'vbox'
                        },
                        items:[{
                            xtype:'label',
                            text:'Your Logo - '
                        },{
                            xtype:'label',
                            text:'(Dimensions - 100 x 100 px, File Type - .jpg,.gif,.png)',
                            cls: 'descText',
                            width:170
                        }]
                    },{
                        xtype:'button',
                        text:'Upload Logo',
                        scale: 'medium',
                        iconCls:'icon-uploadBtn',
                        width: 120
                    },{
                        xtype:'image',
                        src: 'images/admin_users.png',
                        autoEl: 'div',
                        renderTo: Ext.getBody(),
                        width: 120
                    }]
                }]
            }]
        },{
            border:false,
            margin:'0 10 10 10',
            cls: 'blueSurveyBox',
            layout:{
                type:'vbox',
                align:'stretch',
                padding:'10 10 0 10'
            },
            items:[{
                    xtype:'label',
                    text:'Survey Layout Template',
                    cls:'subTitle'
            },{
                xtype:'panel',
                autoScroll: true,
                items:[{
                border:false,
                layout:{
                    type:'hbox'
                },
                items:[{
                    xtype: 'dataview',
                    store: 'SearchedGraphics',
                    tpl: [
                        '<tpl for=".">',
                            '<div class="thumb-wrap" id="{name:stripTags}">',
                            '<div class="thumb"><table><tr><td><img class="img" src="{url}" title="{name:htmlEncode}"></td></tr></table></div>',
                            '<span class="x-editable">{shortName:htmlEncode}</span>',
                            '</div>',
                        '</tpl>',
                        '<div class="x-clear"></div>'
                    ],
                    multiSelect: true,
                    height: 100,
                    trackOver: true,
                    overItemCls: 'x-item-over',
                    itemSelector: 'div.thumb-wrap',
                    emptyText: ORT.Utility.GridEmptyText,

                    prepareData: function(data) {
                        Ext.apply(data, {
                            shortName: Ext.util.Format.ellipsis(data.name, 15),
                            sizeString: Ext.util.Format.fileSize(data.size),
                            dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
                        });
                        return data;
                    }}]
                }]
            }]
        },{
            border: false,
            margin:'0 10 10 10',
            cls: 'blueSurveyBox',
            layout:{
                type:'vbox',
                align: 'stretch',
                padding:'10 10 0 10'
            },
            defaults:{margins:'0 5 10 5'},
            items:[{
                border: false,
                layout:{
                    type:'vbox',
                    align:'top'
                },
                items:[{
                    xtype:'label',
                    text:'Survey Header Attributes',
                    cls:'subTitle'
                },{
                    border: false,
                    layout:{
                        type:'hbox',
                        align:'top',
                        pack:'center'
                    },
                    defaults:{margins:'5 10 10 0'},
                    items:[{
                        xtype:'textfield',
                        fieldLabel:'Title',
                        name: 'title',
                        labelWidth: 60,
                        width:250
                    },{
                        xtype:'checkbox',
                        boxLabel:'Display Date/Time',
                        boxLabelAlign:'before',
                        margin:'0 0 0 20'
                    },{
                        xtype:'combobox',
                        width:100
                    }]
                },{
                    border:false,
                    layout:{
                        type:'hbox',
                        align:'top' 
                    },
                    defaults:{margins:'0 20 0 0'},
                    items:[{
                        xtype:'combobox',
                        fieldLabel:'Font',
                        labelWidth:60,
                        width:250,
                    },{
                        border: false,
                        layout:{
                            type:'hbox',
                            align:'top',
                            pack:'end'      
                        },
                        defaults:{margin:'0 5 5 10'},
                        items:[{
                            xtype:'combobox',
                            fieldLabel:'Font Size',
                            labelWidth:80,
                            width:200
                        },{
                            xtype:'combobox',
                            fieldLabel:'Text Color',
                            labelWidth:80,
                            width:200
                        }]
                    }]
                }]
            },{
                border: false,
                margin: '5 0 5 0',
                layout:{
                    type:'vbox',
                    align:'top'
                },
                items:[{
                    xtype:'label',
                    text:'Survey Question Attributes',
                    cls:'subTitle'
                },{
                    border: false,
                    layout:{
                        type:'hbox',
                        align:'top',
                        padding:'5 0 0 0'
                    },
                    defaults:{margins:'0 20 0 0'},
                    items:[{
                        xtype:'combobox',
                        fieldLabel:'Font',
                        labelWidth:60,
                        width:250,
                    },{
                        border: false,
                        layout:{
                            type:'hbox',
                            align:'top',
                            pack:'end'      
                        },
                        defaults:{margin:'0 5 0 10'},
                        items:[{
                            xtype:'combobox',
                            fieldLabel:'Font Size',
                            labelWidth:80,
                            width:200
                        },{
                            xtype:'combobox',
                            fieldLabel:'Text Color',
                            labelWidth:80,
                            width:200
                        }]
                    }]
                }]
            },{
                border: false,
                layout:{
                    type:'vbox',
                    align:'stretch'
                },
                items:[{
                    xtype:'label',
                    text:'Survey Answers Attributes',
                    cls:'subTitle'
                },{
                    border: false,
                    layout:{
                        type:'hbox',
                        align:'top',
                        padding:'5 0 0 0'
                    },
                    defaults:{margins:'0 20 0 0'},
                    items:[{
                        xtype:'combobox',
                        fieldLabel:'Font',
                        labelWidth:60,
                        width:250,
                    },{
                        border: false,
                        layout:{
                            type:'hbox',
                            align:'top',
                            pack:'end'      
                        },
                        defaults:{margin:'0 5 0 10'},
                        items:[{
                            xtype:'combobox',
                            fieldLabel:'Font Size',
                            labelWidth:80,
                            width:200
                        },{
                            xtype:'combobox',
                            fieldLabel:'Text Color',
                            labelWidth:80,
                            width:200
                        }]
                    }]
                }]
            }]
        }]
    }]

}],

initComponent: function() {
    this.callParent(arguments);
},
constructor: function (config) {
    this.superclass.constructor.call(this, config);
}});

Answer 1

using css you can remove the AutoScroll property and in your css , set overflow property to auto ( you can set overflow-x and overflow-y each one apart)

Answer 2

My resolution is that your form panel is horribly overnested. You will not be able to get a firm handle on it until you strip it down to the very shell and slowly progress from there. Here is a screenshot from inspecting it with Illuminations. I highly recommend it.

What you should have is a single form panel with several field containers or simple containers only where necessary for the layout. Do check out the examples with similar forms on the Sencha website.