extjs境界線レイアウトの西領域に合わせて垂直タブバーにアイテムを伸ばします。

Question

私は垂直タブバーがあり、境界線レイアウトの西領域に合わせてタブアイテムを水平に伸ばしたいと思います。私は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を削除し、センター領域xtypeをNavigationBarに設定しました。 私はあなたがボーダレイアウトを使用している場合は、地域のすべてを持っている必要はありませんアイテム

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

として連絡先の詳細を追加しましたusers]タブで、あなただけのはセンター1を必要とします - http://docs.sencha.com/extjs/6.0.2/classic/Ext.layout.container.Border.html