문제 extjs 4.0.7에서 4.1.1로 마이그레이션

Question

extjs 4.0.7에서 4.1.1로 전환 할 때 몇 가지 문제가 있습니다. 나는 열 레이아웃 내에서 두 treepanels이

:

첫 번째 문제는 다음과 같다. 바로 옆에 하나. 내 응용 프로그램은 왼쪽 패널에 많은 노드를로드 한 다음 선택적으로 다른 패널로 그 중 일부를 이동할 수 있습니다. 그러나 모든 노드가있는 패널에는 스크롤 막대가 표시되지 않으므로 갑자기 노드 중 1/3 정도를 볼 수 없습니다. 4.0.7에서 반 비슷한 문제가 발생하여 다른 노드를 이동할 때까지 패널이 가득차면 마지막 노드가 이동 한 것을 볼 수 없습니다.

treePanel1.invalidateScroller(); 
treePanel2.invalidateScroller(); 

이 줄은 4.1.1에서 더 이상 사용되지 않으며 문제가 악화 된 것으로 보입니다. 누구나 비슷한 문제가 있었고 스크롤 바를 어떻게 되 찾을 수 있습니까? 내 UI 관련

두 번째 큰 문제 : 내가 바로 옆에 다른 곳에서 서로 두 개의 격자가

는 treepanels 유사 레이 아웃에 삭제합니다. 두 격자 사이에 드래그 앤 드롭을 설정했습니다. 다시 모든 노드는 왼쪽 그리드에서 시작하고, 일부는 오른쪽 그리드로 드래그 할 수 있습니다. 그러나 오른쪽 눈금이 현재 전체 크기로 표시되지 않고 있습니다. 따라서 노드를 드래그하여 작은 조각으로 드래그하면 DD 기능이 그대로 남아 있습니다. 그 후, 슬라이 버는 단일 노드를 보유 할 정도로 확장됩니다. 그래서, 어떻게 그것을 기본 전체 크기로 되 돌리려고합니까? extjs 4.1.1에서 이러한 문제가 발생한 이유는 무엇입니까? 나는 어떤 코드에서라도 뚱뚱한 손가락을 가지고 있어야하지만 절대적으로 필요한 경우 할 수 있습니다. 그러나 누군가 내 설명에 따라이 유형의 문제에 익숙하다면 그럴 것입니다.

편집 : 또한 격자의 가장 오른쪽 열에 콤보 박스가 있습니다. 콤보 상자 중 하나를 클릭하여 변경하면 미니 스크롤바가 해당 종류의 드롭 다운 버튼을 팝업합니다. 그들이이 버전에서 무엇을 했습니까? 나는 높이 a를하는 경우, 왼쪽 패널 :

{ 
    xtype: 'panel', 
    title: 'Select fields', 
    defaults: { 
     border: false, 
     height: '100%' 
    }, 
    layout: 'column', 
    items: [ 

     { 
     xtype: 'treepanel', 
     itemID: 'choicesTreePanel', 
     title: 'Choose from below fields', 
     height: '100%', 
     multiSelect: true, 
     store: choicesTree, 
     rootVisible: false, 
     columnWidth: .44}, 

    { 
     xtype: 'panel', 
     columnWidth: .06, 
     layout: { 
      type: 'vbox', 
      align: 'center' 
     }, 
     defaults: { 
      margins: "15 0 0 0" 
     }, 
     items: [ 
      { 
      xtype: 'button', 
      text: '==>'}, 
     { 
      xtype: 'button', 
      text: '<=='}, 
     { 
      xtype: 'button', 
      text: 'RST'} 

      ]}, 
    { 
     xtype: 'treepanel', 
     itemId: 'chosenTreePanel', 
     title: 'Fields', 
     border: true, 
     store: chosenFields, 
     rootVisible: false, 
     columnWidth: .44, 
     viewConfig: { 
      plugins: { 
       ptype: 'treeviewdragdrop, 
     dragText:' 
       dragginggggg ' 
     }, 
     ddGroup: ' 
       fieldsDD '   
     } 
     }, 
     {xtype:' 
       panel ', 
     columnWidth:.06, 
     layout:{ 
     type:' 
       vbox ', 
     align:' 
       center ' 
     }, 
     items: [ 
      { 
      xtype: ' 
       button ', 
      text: ' 
       UP '}, 
     { 
      xtype: ' 
       button ', 
      text: ' 
       DOWN '} 

      ] 
     } 

     ] 
} 

편집 : 여기

내가 그에게 필요로 할 때 스크롤 패널에 표시되지 않는 경우 첫 번째 문제가 레이아웃 정의입니다 값을 설정하고 autoscroll을 true로 설정하면 스크롤바가 생깁니다. '100 %'높이를 설정하고 자동 스크롤을 설정하면 스크롤 막대가 없습니다. 그래서 해결책은 스크롤을 유지하면서 패널, 부모의 높이에 맞게해야하는 방법을 찾을 수 있습니다

Answer 1

백분율 기반 높이 솔루션을 찾고 있지만 고정 값 높이를 사용할 수도 있습니다. 많은 경우이 방법으로 문제가 해결됩니다. 예를 들어 패널을 600 높이로 설정하면 스크롤러 문제를 해결할 수 있습니다.

이렇게해도 백분율 기반 레이아웃에서는 문제가 해결되지 않습니다. 잘만되면 다른 사람이 도움을 줄 수 있기를 바랍니다.

Answer 2

첫 번째 질문에 관한

(어쩌면 그것은 당신의 별도의 여러 질문에 질문을 분할하는 것이 좋습니다)

예를 들어 "treepanel의 높이를 100 %로 설정하고 싶습니다."라는 질문을 던지기 만하면됩니다.

일반적으로 열 레이아웃은 부모와 관련된 하위 요소의 높이를 신경 쓰지 않을 때 사용됩니다. 여기에서 볼 수있는 것처럼 하위 요소 높이의 합으로 열의 높이를 정의합니다. http://docs.sencha.com/ext-js/4-1/extjs-build/examples/layout/column.html .

열에 높이를 정의하지 않았으므로, 높이가없는 하위 요소의 높이를 사용합니다. 나는이 경우 Ext가 어떤 일을하는지 알지 못한다. 그러나 이것에 기반하여, 그것은 똑똑한 일을 아무것도 할 수 없다.당신이 treepanel가 포함 된 패널의 전체 높이를 사용하려면

, 당신은 스트레치에 정렬 속성 세트와 hbox에 레이아웃을 사용합니다. 높이 계산이 제대로 수행 될 수 있기 때문에 스크롤바가 고정 될 수도 있습니다. "height : 100 %"및 "autoscroll"속성을 삭제해야한다는 것을 잊지 마세요.

마지막으로 treepanel의 레이아웃을 '맞춤'으로 변경하면 원하는 결과를 얻을 수 있습니다. 난 당신의 코드에이 답변을 테스트하지 않았다

{ 
    xtype: 'panel', 
    layout: { 
     type: 'hbox', 
     align: 'stretch' 
    }, 
    items: [{ 
     xtype: 'treepanel', 
     layout: 'fit', 
     flex: 44, 
     ... 
    }, { 
     flex: 6, 
     ... 
    },{ 
     flex: 44, 
     ... 
    }] 
} 

:

코드는 무언가 같이 될 수 있습니다. 전체 작동 코드 샘플 (더미 저장소 포함)을 제공하십시오. 그러면 테스트 해 보겠습니다.