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，并将中心区域xtype 设置为NavigationBar。 在users 选项卡上，我将联系方式添加为项目

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

如果您使用边框布局，则不需要所有区域，您只需要中间的区域 - 参见http://docs.sencha.com/extjs/6.0.2/classic/Ext.layout.container.Border.html