ExtJs - 패널의 가운데 배치에서 고정 너비 설정

Question

ExtJs 사용.

나는 세 개의 하위 패널 (트리 목록, 격자 및 패널)로 구분되는 메인을 디자인하려고합니다. 작동 방식은 요소가있는 트리 목록 (서쪽)이 있고, 격자 (가운데)를 채우는 요소를 클릭 한 다음 그리드의 요소를 클릭하고 패널 (서쪽)을 생성하는 것입니다.

다른 세 개의 기본 패널을 포함하는 내 패널은 레이아웃 '테두리'로 정의되었습니다.

이제 제가 직면 한 문제는 중앙 레이아웃 (격자)이 코드에서 고정 너비로, 서쪽 패널이 자동 너비로 정의되어 있다는 것입니다. 그러나 인터페이스가 생성되면 그리드 폭은 갑자기 서쪽 패널 대신 인터페이스의 모든 공간을 차지하게됩니다.

코드는 다음과 같습니다

여기

var exploits_details_panel = new Ext.Panel({ 
region: 'east', 
autoWidth: true, 
autoScroll: true, 
html: 'test' 
}); 

var exploit_commands = new Ext.grid.GridPanel({ 
store: new Ext.data.Store({ 
    autoDestroy: true 
    }), 

sortable: true, 
autoWidth: false, 
region: 'center', 
stripeRows: true, 
autoScroll: true, 
border: true, 
width: 225, 

columns: [ 
    {header: 'command', width: 150, sortable: true}, 
    {header: 'date', width: 70, sortable: true} 
] 
}); 

var exploits_tree = new Ext.tree.TreePanel({ 
border: true, 
region: 'west', 
width: 200, 
useArrows: true, 
autoScroll: true, 
animate: true, 
containerScroll: true, 
rootVisible: false, 
root: {nodeType: 'async'}, 
dataUrl: '/ui/modules/select/exploits/tree', 

listeners: { 
    'click': function(node) { 
    } 
} 
}); 

var exploits = new Ext.Panel({ 
id: 'beef-configuration-exploits', 
title: 'Auto-Exploit', 
region: 'center', 
split: true, 
autoScroll: true, 
layout: { 
    type: 'border', 
    padding: '5', 
    align: 'left' 
}, 

items: [exploits_tree, exploit_commands, exploits_details_panel] 
}); 

'var에 공격이'세 개의 다른 하위 패널을 포함하는 내 주요 패널입니다.

'exploits_tree'는 몇 가지 요소가 포함 된 트리 목록입니다. 요소 중 하나를 클릭하면 그리드 'exploit_commands'가 채워지며 채워진 요소 중 하나를 클릭하면 'exploits_details_panel'패널이 생성됩니다.

'exploit_commands'에 고정 폭을 설정하려면 어떻게해야합니까?

감사합니다.

Answer 1

docs에 따르면 가운데 영역은 고정 너비가 될 수 없습니다 (참고 제목 아래의 첫 번째 글 머리 기호 참조). 다른 모든 영역 (N, S, E 또는 W)은 크기를 정의 할 수 있으며 가운데 영역은 남은 공간을 단순히 차지합니다. BTW, 이것은 다른 GUI 플랫폼에서도이 스타일의 레이아웃에 대한 표준 접근법입니다 (또는 예로서 사용한 모든 그래픽 IDE를 생각해보십시오).

동쪽 패널에 자동 너비를 설정하지 말고 정의 된 시작 너비를 지정하십시오 (그렇지 않으면 표시되지 않음, 아마도 보았을 것입니다).