我有一个包含多个组件的容器。在容器的末尾，放置一个提交按钮。
当我向下滚动时，它显示按钮。
但如果我离开滚动条，它又会回到屏幕顶部。因此用户无法按下提交按钮。
所以我想，当我滚动到容器的末尾时，它将停在那里并显示按钮。所以我可以按下按钮。这是我的容器代码：
{
xtype : 'container',
id : 'dashboardiconcontainer',
height: 800,
scrollable : true,
layout: 'vbox',
items : [
{
xtype : 'container',
id : 'topitembox',
layout : {
type : 'hbox'
},
margin : '10 0 0 10',
height : 50,
items : [ {
xtype : 'textfield',
id : 'itemname',
labelWidth : '40%',
label : 'Name of the item',
width : 320
}, {
xtype : 'textfield',
id : 'barcodtext',
width : 300,
margin : '0 0 0 10',
labelWidth : '40%',
label : 'Enter Barcode'
}, {
xtype : 'button',
height : 40,
margin : '0 0 0 10',
id : 'scanbutton',
ui : 'orange',
width : '80',
text : 'scan barcode'
} ]
},
{
xtype : 'container',
height : 160,
id : 'cameraimagecontainer',
margin : '10 0 0 10',
layout : {
type : 'hbox'
},
items : [
{
html : '<img style="width:180px; height:150px;display:none;" id="capturedimage" src="" />'
},
{
xtype : 'container',
id : 'btncontainer',
width : 120,
margin : '0 0 0 10',
layout : {
type : 'vbox'
},
items : [
{
xtype : 'button',
height : 73,
cls : 'capturebtn',
id : 'capturebtn',
width : 100
},
{
xtype : 'button',
height : 73,
margin : '10 0 0 0',
cls : 'choosephotobtn',
id : 'selectphoto',
width : 100
} ]
},
{
xtype : 'container',
id : 'additionalinfo',
margin : '10 0 0 10',
width : 400,
layout : {
type : 'vbox'
},
items : [
{
xtype : 'textareafield',
height : 80,
width : 380,
id : 'additionalinfo',
label : 'Add Additiona Details',
labelWidth : '40%',
placeHolder : ''
},
{
xtype : 'selectfield',
margin : '5 0 0 0',
width : 300,
label : 'Select Category',
options : [
{
text : 'Food',
value : 'first'
},
{
text : 'Sports',
value : 'second'
},
{
text : 'Electronics',
value : 'third'
} ],
labelWidth : '40%'
},
{
xtype : 'textareafield',
id : 'Addmoretag',
margin : '10 0 0 0',
width : 320,
placeHolder : 'Add any other tags you want '
},
{
xtype : 'button',
height : 54,
id : 'Addwishlog',
margin : '10 0 0 0',
ui : 'orange',
width : 250,
text : 'Add to my wishlog'
}
]
} ]
} ]
}
答案 0 :(得分：0)
看看这段代码
{
xtype : 'container',
id : 'dashboardiconcontainer',
height: 800,
scrollable : true,
scrollable: 'vertical',
draggable: {
direction: 'vertical',
constraint: {
min: { x: 0, y: 0 },
max: { x: 0, y: 700 }
},
listeners: {
dragstart: {
fn: function(draggable, evt, offsetX, offsetY, eOpts){
},
order: 'before'
},
drag: function(panel, e, offset){
},
dragend: function(draggable, evt, offsetX, offsetY, eOpts){
},
layout: 'vbox',
items : [
{
xtype : 'container',
id : 'topitembox',
layout : {
type : 'hbox'
},
margin : '10 0 0 10',
height : 50,
items : [ {
xtype : 'textfield',
id : 'itemname',
labelWidth : '40%',
label : 'Name of the item',
width : 320
}, {
xtype : 'textfield',
id : 'barcodtext',
width : 300,
margin : '0 0 0 10',
labelWidth : '40%',
label : 'Enter Barcode'
}, {
xtype : 'button',
height : 40,
margin : '0 0 0 10',
id : 'scanbutton',
ui : 'orange',
width : '80',
text : 'scan barcode'
} ]
},
{
xtype : 'container',
height : 160,
id : 'cameraimagecontainer',
margin : '10 0 0 10',
layout : {
type : 'hbox'
},
items : [
{
html : '<img style="width:180px; height:150px;display:none;" id="capturedimage" src="" />'
},
{
xtype : 'container',
id : 'btncontainer',
width : 120,
margin : '0 0 0 10',
layout : {
type : 'vbox'
},
items : [
{
xtype : 'button',
height : 73,
cls : 'capturebtn',
id : 'capturebtn',
width : 100
},
{
xtype : 'button',
height : 73,
margin : '10 0 0 0',
cls : 'choosephotobtn',
id : 'selectphoto',
width : 100
} ]
},
{
xtype : 'container',
id : 'additionalinfo',
margin : '10 0 0 10',
width : 400,
layout : {
type : 'vbox'
},
items : [
{
xtype : 'textareafield',
height : 80,
width : 380,
id : 'additionalinfo',
label : 'Add Additiona Details',
labelWidth : '40%',
placeHolder : ''
},
{
xtype : 'selectfield',
margin : '5 0 0 0',
width : 300,
label : 'Select Category',
options : [
{
text : 'Food',
value : 'first'
},
{
text : 'Sports',
value : 'second'
},
{
text : 'Electronics',
value : 'third'
} ],
labelWidth : '40%'
},
{
xtype : 'textareafield',
id : 'Addmoretag',
margin : '10 0 0 0',
width : 320,
placeHolder : 'Add any other tags you want '
},
{
xtype : 'button',
height : 54,
id : 'Addwishlog',
margin : '10 0 0 0',
ui : 'orange',
width : 250,
text : 'Add to my wishlog'
}
]
} ]
} ]
}