Hola estado realizando un marco para el desarrollo de una aplicación y me encuentro con el siguiente error cuando levanto la misma (ver figura 1); una vez que realizo cualquier acción sobre cualquiera de los paneles (por ejemplo contraer el de navegación), la página toma la forma que quiero ( ver figura 2)ya he estado leyendo en varios lugares pero no doy con el problema les pongo el código por si hay algún error. Alguien tiene alguna idea de que puede ser!!!!!

Ext.onReady(function() {
    Ext.QuickTips.init();
    Ext.BLANK_IMAGE_URL = 's.gif';
    
    var backendViewport = new Ext.Viewport({
      layout: 'border',
      title: 'Sistema Automatizado para la toma de Decisiones',      
      items:[{
                  xtype: 'box',
                region: 'north',
                applyTo: 'header',
                height: 30
                  
              },
              {
                    region: 'west',
                  title: 'Arbol de Navegación',
                  border: true,
                  collapsible: true,
                  margins: '2 0 5 5',
                  cmargins: '2 5 5 2',
                  split: true,
                  maxSize: 500,
                  width: 205,
                  minSize: 100                  
              },
              {
                    title: 'Área de trabajo',
                  region: 'center',
                  margins: '2 2 5 0',
                  layout: 'fit'
              }
            ],
      renderTo: document.body
    })
});