如何只在需要时才能看到水平滚动条？
我只想在需要时使用垂直滚动条和水平滚动条（例如，屏幕最小化），所以我将主面板包装到 autoScroll 属性为true的面板中进入具有布局：适合的面板。现在，垂直滚动条仅在需要时出现，但不显示水平滚动条。
什么方法可以在需要时显示水平滚动条？任何帮助，将不胜感激。
请在下面找到我的代码：
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 个答案:
答案 0 :(得分：1)
我的决议是您的表单面板严重过度。在将它剥离到壳体并从那里缓慢前进之前，你将无法牢牢抓住它。这是用Illuminations检查它的截图。我强烈推荐它。
您应该拥有的是具有多个字段容器或简单容器的单个表单面板，仅用于布局所需的位置。请在Sencha网站上查看类似表格的示例。
答案 1 :(得分：0)
使用css你可以删除 AutoScroll 属性，在你的css中，将 overflow 属性设置为 auto （你可以设置overflow-x和溢出-y每一个分开）
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？