0

我有一个包含多个组件的容器。在容器的末尾,放置了一个提交按钮。

当我向下滚动时,它显示按钮。

但如果我离开滚动条,它又会回到屏幕顶部。所以用户无法按下提交按钮。

所以我想,当我滚动到容器的末尾时,它会停在那里并显示按钮。这样我就可以按下按钮了。这是我的容器代码:

{

    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'
                                         }

                                    ]
                        } ]
            } ]
   }
4

1 回答 1

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'
                                         }

                                    ]
                        } ]
            } ]
   }
于 2012-12-27T13:29:03.557 回答