컨테이너가 고정 된 위치이지만 가로 스크롤에서만 사용됨

Question

특정 종류의 레이아웃을 얻으려고합니다. 지금까지의 노력은 fiddle example에서 미리 볼 수 있습니다.

기본적으로 빨간색 테두리 컨테이너가있는 왼쪽 컨테이너 (fixedContainer)를 고정 위치로 만들고 가로로 스크롤 할 때 완전히 보이게해야합니다. 그러나 수직으로 스크롤 할 때 컨테이너의 나머지 부분과 함께 정상적으로 스크롤해야합니다.

현재 코드 :

Ext.create('Ext.window.Window', { 
    title: 'Hello', 
    height: 500, 
    width: 700, 
    layout:'vbox', 
    scrollable:true, 
    items:[{ 
     xtype:'container', 
     reference:'mainContainer', 
     layout:{ 
      type:'hbox' 
     }, 
     margin:10, 
     items:[{ 
      xtype:'container', 
      reference:'fixedContainer', 
      style:'position:relative;', 
      defaults:{ 
       style:'border: 1px solid red;', 
       left:100, 
       width:200, 
       height:120, 
       bodyPadding:10 
      }, 
      items:[{ 
       html:'panel1' 
      },{ 
       html:'panel2' 
      },{ 
       html:'panel3' 
      },{ 
       html:'panel4' 
      }] 
     },{ 
      xtype:'container', 
      reference:'scrollContainer', 
      defaults:{ 
       border:true, 
       width:700, 
       height:120, 
       bodyPadding:10 
      }, 
      items:[{ 
       html:'panel1' 
      },{ 
       html:'panel2' 
      },{ 
       html:'panel3' 
      },{ 
       html:'panel4' 
      }] 
     }] 
    }] 
}).show(); 

Answer 1

난 당신이 찾고있는 것을 이해하면, 당신은 당신의 코드에서 몇 가지 레이아웃을 변경해야합니다. 먼저 창을 layout: 'fit'으로 만들어야 자녀가 창 컨테이너에 맞을 수 있습니다.

mainContainer을 layout: border으로 설정하고 하위 패널을 각각 region: 'west' 및 region: 'center'으로 설정합니다. 이렇게하면 fixedContainer이 왼쪽에 고정되고 scrollableContainer은 가운데에 고정됩니다.

Finchally scrollable: "horizontal" 속성을 scrollableContainer에 추가하여 가로로 스크롤하십시오.

는

Ext.create('Ext.window.Window', { 
    title: 'Hello', 
    height: 500, 
    width: 700, 
    layout: 'fit', // Changed this 
    scrollable:true, 
    items:[ 
     { 
      xtype:'container', 
      reference:'mainContainer', 
      layout: 'border', // Changed this 
      margin:10, 
      items:[ 
       { 
        xtype:'container', 
        region:'west', // Added this 
        reference:'fixedContainer', 
        defaults:{ 
         style:'border: 1px solid red', 
         width:200, 
         height:120, 
         bodyPadding:10 
        }, 
        items:[{ 
         html:'panel1' 
        },{ 
         html:'panel2' 
        },{ 
         html:'panel3' 
        },{ 
         html:'panel4' 
        }] 
       }, 
       { 
        xtype:'container', 
        region: 'center',   // Added this 
        scrollable: "horizontal", // Added this 
        reference:'scrollContainer', 
        defaults:{ 
         border:true, 
         width:700, 
         height:120, 
         bodyPadding:10 
        }, 
        items:[{ 
         html:'panel1' 
        },{ 
         html:'panel2' 
        },{ 
         html:'panel3' 
        },{ 
         html:'panel4' 
        }] 
       } 
      ] 
    }] 
}).show(); 

EDIT1 : @Evan Trimboli는 바와 같이

은 첫 번째 코드 샘플 패널 오버플로 수직 스크롤링을 고려하지 않은,이 제 2 샘플은 수직 스크롤 경계 배치를 설정한다. scrollContainer은 수직 스크롤을 만족시키는 추가 컨테이너로 포장됩니다. 나머지 코드는 초기 대답과 동일하게 유지됩니다.

Ext.create('Ext.window.Window', { 
    title: 'Hello', 
    height: 500, 
    width: 700, 
    layout: 'fit', // Changed this 
    items: [{ 
     xtype: 'container', 
     reference: 'mainContainer', 
     scrollable: 'vertical', // #edit1: Added this 
     layout: 'border', // Changed this 
     margin: 10, 
     items: [{ 
      xtype: 'container', 
      region: 'west', // Added this 
      reference: 'fixedContainer', 
      defaults: { 
       style: 'border: 1px solid red', 
       width: 200, 
       height: 120, 
       bodyPadding: 10 
      }, 
      items: [{ 
       html: 'panel1' 
      }, { 
       html: 'panel2' 
      }, { 
       html: 'panel3' 
      }, { 
       html: 'panel4' 
      }, { 
       html: 'panel5' 
      }] 
     }, { 
      xtype: 'container', //#edit1: New container here to satisfy the vertical scroll 
      region: 'center', 
      items: [{ 
       xtype: 'container', 
       scrollable: "horizontal", // Added this 
       reference: 'scrollContainer', 
       defaults: { 
        border: true, 
        width: 700, 
        height: 120, 
        bodyPadding: 10 
       }, 
       items: [{ 
        html: 'panel1' 
       }, { 
        html: 'panel2' 
       }, { 
        html: 'panel3' 
       }, { 
        html: 'panel4' 
       }, { 
        html: 'panel5' 
       }] 
      }] 
     }] 
    }] 
}).show(); 

Answer 2

확인이 노력에 대한

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
     var horizontalScroll = 0 
     var gridwindow = Ext.create('Ext.window.Window', { 
      referenceHolder: true, 
      title: 'Hello', 
      height: 500, 
      width: 700, 
      layout: 'vbox', 
      scrollable: true, 
      items: [{ 
       xtype: 'container', 
       reference: 'mainContainer', 
       layout: { 
        type: 'hbox' 
       }, 
       margin: 10, 
       items: [{ 
        xtype: 'container', 
        reference: 'fixedContainer', 
        style: 'position:relative; z-index:10; box-shadow: -20px 0px 0px 1px #fff;', 
        defaults: { 
         style: 'border: 1px solid red; outline', 
         width: 200, 
         height: 120, 
         bodyPadding: 10 
        }, 
        items: [{ 
         html: 'panel1' 
        }, { 
         html: 'panel2' 
        }, { 
         html: 'panel3' 
        }, { 
         html: 'panel4' 
        }] 
       }, { 
        xtype: 'container', 
        reference: 'scrollContainer', 
        defaults: { 
         border: true, 
         width: 700, 
         height: 120, 
         bodyPadding: 10 
        }, 
        items: [{ 
         html: 'panel1' 
        }, { 
         html: 'panel2' 
        }, { 
         html: 'panel3' 
        }, { 
         html: 'panel4' 
        }] 
       }] 
      }] 
     }).show(); 

     gridwindow.body.on('scroll', function (event) { 
      var scrollLeft = event.target.scrollLeft; 
      if (horizontalScroll !== scrollLeft) { 
       var fixedContainer = this.lookup('fixedContainer'); 
       fixedContainer.el.translate((scrollLeft), 0) 

      } 
      horizontalScroll = scrollLeft; 

     }, gridwindow); 
    } 
}); 

https://fiddle.sencha.com/#view/editor&fiddle/28ug

덕분에이 모든 문제에 대한 내 작업 솔루션입니다. 다행히도 이것은 비슷한 문제를 가진 다른 누군가를 도울만큼 충분합니다.