0
我只想在需要垂直滚动条和水平滚动条时（例如屏幕最小化），所以我将我的主面板包装到具有autoScroll属性的面板中，然后将其转换为具有布局的面板：适合。现在，垂直滚动条仅在需要时出现，但水平滚动条未出现。如何仅在需要时才能看到水平滚动条？
有什么办法可以让水平滚动条在需要时也出现？任何帮助，将不胜感激。
请在下面找到我的代码：
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);
}});
我没有看到滚动问题：http://jsfiddle.net/dbrin/AxzvG/ – dbrin
@ DmitryB：请检查编辑的代码... – Supereme
添加了一些虚拟数据，但我没有看到滚动条。哪个面板卷动？外面的面板在哪里渲染？我把它放到了身体里，这是你的用例吗？ http://jsfiddle.net/dbrin/AxzvG/3/show/light/ – dbrin