ExtJs - border layout - splitter config

Question

My panel with border layout looks like this:

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
 }]
});

Then another panel gets added to this west region panel:

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

Then this split panel gets added to my main view:
```
that.getView().add(oSplitPanel);
```

Then in another function, I add the center panel:

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

oSplitPanel.add(oAddPanelRight);

Problem:

Everything works perfect this way, however I want to change (limit) the splitter's own width (this splitter is in between west and center panels to resize their width).

What I tried:

Try to change the width of splitters:

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

Adding a negative margin to the center panel:

         // Tried this:
         margin: '0 0 0 -4'

         // And that:
         style: {
            border: 0,
            marginLeft: '-3px'
         }

sra sra · Accepted Answer · 2012-11-13T11:29:23

Your oSplitPanel object/instance does not have the split param set to true and has therefor no splitter applied. The splitter get applied to oAddPanelRight object/instance and the nested panel of the oSplitPanel, maybe also to the panel you add later. Can't tell that.

So you just looked at the wrong class.

Btw. to get a splitter for the class itself you don't need look at oSplitPanel.layout.splitters Just look at the splitter prop of the class.

ExtJs - border layout - splitter config

2 Answers