extjs Элементы растяжения в вертикальной панели вкладок, чтобы соответствовать западному региону границы.

Question

У меня есть вертикальная панель вкладок, и я хочу, чтобы tabitems растягивались горизонтально, чтобы соответствовать западному региону моей границы. У меня есть все, что у sencha fiddler, но я не знаю, как поделиться ссылкой, чтобы каждый мог видеть мой код. любые идеи, как исправить это ... и поделиться своим скрипачом?

Ext.application({ 
name: 'Fiddle', 

launch: function() { 
    //Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!'); 

    var mainVP = Ext.create(Ext.container.Viewport, { 
     layout: 'border', 
     defaults: { 
      style: 'border: 1px solid black' 
     }, 
     items: [{ 
      html: 'hio', 
      region: 'center', 
      xtype: 'tabpanel', 
      title: 'main tab panel' 
     }, { 
      html: 'north', 
      region: 'north', 
      height: 50, 
      title: 'this is my header area' 
     }, { 
      html: 'east', 
      region: 'east', 
      width: 50 
     }, { 
      html: 'west', 
      region: 'west', 
      width: 250, 
      title: 'westregion', 
      xtype: 'NavigationBar' 

      //items: [{ 
       //xtype: 'button', 
       //text: 'click me', 
       //listeners: { 
        // click: function(btn) { 
         //Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!'); 

        // btn.up('viewport').down('tabpanel').add({ 
         //  xtype: 'clientDetails' 
         // }); 
        //} 
       //} 
      //}] 
     }] 
    }); 
} 
}); 

Ext.define('Ext.test1.NavigationBar', { 
extend: 'Ext.tab.Panel', 
alias: 'widget.NavigationBar', 

tabBar: { 
    //width: 250, 
    //minTabWidth: 130, 
    //maxTabWidth: 240,   
    orientation: 'vertical', 
    //defaults: { 
    // flex: 1 
    //} 
    //dock: 'left', 

    //layout: { 
    // pack: 'center' 
    //} 
}, 

layout: 'fit', 

tabPosition: 'left', 

//titleRotation: 0, 
tabRotation: 0, 

items: [{ 
    title: 'Home', 
    iconCls: 'fa-home', 
    layout: 'fit' 
    // The following grid shares a store with the classic version's grid as well! 
}, { 
    title: 'Users', 
    iconCls: 'fa-user' 
     //layout: 'fit' 

}, { 
    title: 'Groups', 
    iconCls: 'fa-users' 
     //layout: 'fit' 
}, { 
    title: 'Settings', 
    iconCls: 'fa-cog' 
     //layout: 'fit' 
}] 
}); 

Answer 1

Я редактировал вашу скрипку немного - делает вид this/работу как-то вы хотели добиться?

Я удалил westregion и установил для него средний тип области NavigationBar. На вкладке users я добавил контактные данные в качестве элемента

{ 
     title: 'Users', 
     iconCls: 'fa-user', 
      items: [{ 
       xtype: 'clientDetails' 
      }] 
    } 

Если вы используете макет границы, вам не нужно иметь все регионов, вы только потребность центр один - см. http://docs.sencha.com/extjs/6.0.2/classic/Ext.layout.container.Border.html