컨테이너 끝까지 스크롤하지 않습니다.

Question

여러 구성 요소가있는 컨테이너가 있습니다. 컨테이너 끝에는 제출 버튼이 하나 있습니다.

아래로 스크롤하면 버튼이 표시됩니다.

하지만 스크롤을 벗어나면 다시 화면 상단으로 돌아옵니다. 따라서 사용자는 제출 버튼을 누를 수 없습니다.

그래서 컨테이너 끝까지 스크롤하면 멈추고 버튼이 표시됩니다. 버튼을 누를 수있게. 여기 내 컨테이너 코드 :이 코드에서

{ 

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

            ] 
         } ] 
      } ] 
    } 

Answer 1

보기

{ 

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

            ] 
         } ] 
      } ] 
    }