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.
我只想在需要它时使用垂直滚动条和水平滚动条（例如，屏幕最小化），所以我将主面板包装到一个具有autoScroll属性为true的面板中，然后将其包含在一个面板中：layout：fit。现在，垂直滚动条仅在需要时出现，但不显示水平滚动条。
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);
}});
2 个解决方案
#1
1
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. 
我的决心是你的表单面板严重过度。在将它剥离到壳体并从那里缓慢前进之前，你将无法牢牢抓住它。这是用Illuminations检查它的截图。我强烈推荐它。
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.
您应该拥有的是具有多个现场容器或简单容器的单个表单面板，仅用于布局所需的位置。请在Sencha网站上查看类似表格的示例。
#2
0
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)
使用css你可以删除AutoScroll属性，在你的css中，将overflow属性设置为auto（你可以将overflow-x和overflow-y设置为每个）
#1
1
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.
我的决心是你的表单面板严重过度。在将它剥离到壳体并从那里缓慢前进之前，你将无法牢牢抓住它。这是用Illuminations检查它的截图。我强烈推荐它。
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.
您应该拥有的是具有多个现场容器或简单容器的单个表单面板，仅用于布局所需的位置。请在Sencha网站上查看类似表格的示例。
#2
0
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)
使用css你可以删除AutoScroll属性，在你的css中，将overflow属性设置为auto（你可以将overflow-x和overflow-y设置为每个）