의 ExtJS - 국경 레이아웃 - 스플리터 설정

Question

1. border 레이아웃 내 패널을 다음

   다음 다른 패널이 west 지역 패널에 추가됩니다

   var oSplitPanel = Ext.create('Ext.panel.Panel', { 
   lid : 'splitpanel', 
   layout: 'border', 
   border: 0, 
   style: { border: 0 } 
   height: 150, 
   items: [{ 
       split: true, 
       flex: 1, 
       region: 'west', 
       xtype: 'panel', 
       lid: 'panelwest', 
       layout: 'fit', 
       minWidth: 200 
   }] 
   }); 
   

2. : 다음

   oSplitPanel.query('[lid=panelwest]')[0].add(oExplorerPanel); 
   

3. 이 분할 패널이 내 메인보기에 추가됩니다.

   that.getView().add(oSplitPanel); 
   

4. 그런 다음 다른 함수에서, 나는 center 패널을 추가

   var oAddPanelRight = { 
        split: true, 
        flex: 3, 
        region: 'center', 
        xtype: 'panel', 
        lid: 'panelcenter', 
        layout: 'fit', 
        border: 0 
       }; 
   
   oSplitPanel.add(oAddPanelRight); 
   

   문제

:

모든 것이 이런 식으로, 내가 스플리터의을 (한계)을 변경하려는 그러나 를 완벽하게 작동 자신의 너비는입니다 (이 스플리터는 너비를 조정하기 위해 west과 center 패널 사이에 있음).

1. 시도를 스플리터의 폭 변경 :

     // Tried this: 
        margin: '0 0 0 -4' 
   
        // And that: 
        style: { 
         border: 0, 
         marginLeft: '-3px' 
        } 
   

다음 center 패널에 부정적인 여백을 추가

listeners: { 
    afterrender: function() { 
     // error following, 'splitters' does not exist 
     oSplitPanel.layout.splitters.west.setWidth(1); 
     oSplitPanel.doLayout(); 
    } 
} 

를 해봤 무엇

Answer 1

oSplitPanel 개체/인스턴스에 균열 param이 true로 설정되어 있지 않으므로 스플리터가 적용되지 않습니다. 스플리터는 oAddPanelRight 개체/인스턴스와 oSplitPanel의 중첩 패널에 적용되며 나중에 추가하는 패널에 적용될 수도 있습니다. 말할 수 없어요.

그래서 방금 잘못된 수업을 보았습니다.

btw. 클래스 자체에 대한 스플리터를 얻으려면 oSplitPanel.layout.splitters을보아야합니다. 클래스의 보조 도구 splitter을 살펴보십시오.

Answer 2

또는 사용 이벤트 여기

listeners: { 
    add: function (me, item) { 
     if (item.xtype == 'bordersplitter') item.width = 2; 
    } 
}, 

데모 http://ext4all.com/post/extjs-4-border-layout-splitter-width