ExtJS : 패널에 세로 모양 자동 스크롤 추가됨

전체 페이지에 대해 BorderLayout이있는 곳에 앱을 작성하고 있습니다. 남쪽 부분에는 FormPanels을 추가하는 Panel이 있습니다. FormPanels을 스크롤 할 수 있도록 해당 패널을 스크롤 할 수 있어야합니다.ExtJS : 패널에 세로 모양 자동 스크롤 추가됨

지금까지 검색에서 찾은 것은 아무 것도 도움이되지 않았습니다. ExtJS가 LayoutManager의 조합, 크기 설정 및 AutoScroll 설정과 관련하여 무엇을 요구하는지 잘 모르겠습니다.

감사의 말을들을 수 있습니다.

코드 조각 : 그것은 autoScroll:true을해야하고 그것으로 양식 및 그리드를 모두 추가해야하므로

new Ext.Viewport({ 
    layout: "border", 
    items: [{ 
     region: "north", 
     contentEl: "title", 
     height: 50 
    }, { 
     region: "center", 
     id: "mappanel", 
     title: "Map", 
     xtype: "gx_mappanel", 
     map: map, 
     layers: [layer], 
     extent: extent, 
     split: true, 
     tbar: toolbarItems 
    }, { 
     region: "east", 
     title: "Details", 
     width: 300, 
     split: true, 
     id: "east-panel", 
     laout: 'fit' 
    }, { 
    region: "south", 
    id: "south-panel", 
    height: 200 
    }, { 
    region: "west", 
    id: "west-panel", 
    width: 300 
    }] 
}); 

matchedTrailJunctionsPanel = new Ext.Panel({ 
     title: "Matched Trail Junctions2", 
     id: "matched-trail-junctions", 
     autoScroll:true 
     //layout: 'anchor' 
    }); 

var southPanel = Ext.getCmp('south-panel'); 

southPanel.add(matchedTrailJunctionsPanel); 
southPanel.doLayout(); 

createTrailJunctionPanel = function(trailJunction) { 
var trailJunctionPanel = new Ext.form.FormPanel({ 
    labelWidth: 75, 
    width: 350, 
    defaultType: 'textfield', 
    items: [{ 
      fieldLabel: 'Junction Name', 
      name: 'junction-name' 
     }], 
    autoScroll:true, 
    //anchor: '100% 100%', 
    height: 100 
}); 
matchedTrailJunctionsPanel.add(trailJunctionPanel); 
if(trailJunction.publicTrailSegments.length == 0) { 
    matchedTrailJunctionsPanel.add(new Ext.form.Label({text: 'No public trails matched'}));  
} else { 
    var grid = new Ext.grid.GridPanel({ 
     store: mapMatchObjectStore, 
     columns: [ 
      {id:'publicTrailSegment',header: 'Trail', width: 160, sortable: true, dataIndex: 'publicTrailSegment'} 
     ], 
     stripeRows: true, 
     autoExpandColumn: 'publicTrailSegment', 
     height: 350, 
     width: 600, 
     title: 'Matched Trail Junctions'  
    }); 
    matchedTrailJunctionsPanel.add(grid); 
} 
matchedTrailJunctionsPanel.doLayout(); 
}

출처

2010-04-05 Sarge

matchingTrailJunctionsPanel이 테두리 레이아웃의 일부인 경우 지역 값을 설정해야합니다. 테두리 레이아웃에는 '가운데'영역도 있어야합니다. 전체 코드를 게시 할 수 있습니까? –

요청에 따라 더 많은 코드를 포함 시켰습니다. 포함 패널 인 matchedTrailJunctionsPanel에 높이를 설정하면 스크롤바가 표시된다는 것을 발견했습니다. 그러나 GridPanel을 포함하면 작업이 혼란스럽고 GridPanel은 다음 패널을 숨 깁니다. – Sarge

귀하의 남쪽 패널, 당신의 구성 요소의 주요 컨테이너입니다. 폼 필드가 아니기 때문에 FormPanel에 실제로 눈금을 추가 할 수 없습니다 (필드로 감싸거나 Field의 인터페이스 중 일부를 구현해야합니다). 그것은 레이아웃이없는 남쪽에서 작동 할 수도 있습니다 (브라우저는 양식 바로 뒤에 그리드를 붙여야합니다). 일반적으로 적절한 레이아웃을 지정하는 것이 좋습니다 (이 경우에는 vbox이 좋을 것입니다).

출처

2010-04-05 18:07:43

southPanel을 autoScroll로 변경 (포함 된 객체를 autoHeight : true로 변경)합니다. 격자 문제는 기본 배열이 다른 저장소와 공유되었다는 것입니다. FormPanels의 그리드에 대해 조언 해 주셔서 감사합니다. – Sarge

내 대답이 도움이된다면 동의하는 것이 좋습니다. 감사! ExtJS 4.0 autoHeight의 –

은 컨테이너에서만 적용 가능하므로 추가 된 하위 구성 요소에 autoHeight를 추가해도 아무 것도 영향을 미치지 않습니다. 내가 틀렸다면 나를 바로 잡아주세요. – Chris

패널이 포함 된 의 높이를 설정해야합니다. 포함 된 패널의 높이를 설정하거나 autoHeight: true으로 설정해야합니다.

출처

2010-04-05 18:30:43 Sarge

ExtJS : 패널에 세로 모양 자동 스크롤 추가됨

답변

관련 문제