Html 工具栏按钮在sencha中退出视口

我有一个工具栏，有几个右对齐的按钮。但是，当我添加一些冗长的html内容时，按钮就会离开视口

Ext.define('Project.view.ContainerPanel',{
extend:'Ext.Panel',
requires:['Ext.Panel'],
xtype:'containerPanel', 
config:
{
    items:[
           {
                xtype:'toolbar',
                title:'Content',
                height:46,
                ui:'dark',
                docked:'top',
                items:[
                       {
                           xtype:'button',
                           text:'Back',
                           ui:'back'
                       },
                      {
                           xtype:'spacer'
                       },
                       {
                           xtype:'button',
                           text:"left",
                           ui:'normal',
                       },
                       {
                           xtype:'spacer',
                           width:1
                       },
                       {
                           html:'Page',
                           ui:'normal',
                           height:35
                       },
                       {
                           xtype:'spacer',
                           width:1

                       },
                       {
                           xtype:'button',
                           text:"right",
                           ui:'normal',
                       },

                       ]
            },

            {
                     xtype:'panel',
                     items:[
                            {
                                 html:'<div id="msg"></div><div id="view">Huge content without break -> dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>',
                            }

                            ]

            }, 

        ]

 }
});

Ext.define（'Project.view.ContainerPanel'{
扩展：'Ext.Panel'，
需要：['Ext.Panel']，
xtype:'containerPanel'，
配置：
{
项目：[
{
xtype:“工具栏”，
标题:"内容",，
身高：46，
ui:“黑暗”，
停靠：'顶部'，
项目：[
{
xtype:“按钮”，
文本：'返回'，
用户界面：“返回”
},
{
xtype:“间隔器”
},
{
xtype:“按钮”，
文字：“左”，
用户界面：'正常'，
},
{
xtype:“间隔器”，
宽度：1
},
{
html:“页面”，
用户界面：'正常'，
身高：35
},
{
xtype:“间隔器”，
宽度：1
},
{
xtype:“按钮”，
文字：“对”，
用户界面：'正常'，
},
]
},
{
xtype:“面板”，
项目：[
{
html:“巨大的内容不间断->数据aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa，
}
]
}, 
]
}
});

---

如何安装工具栏中的所有按钮？感谢您的帮助。

将下面的行添加到config中解决了此问题

 layout:'fit',

---

我曾经有过类似的头痛，试图让我的标题栏看起来正确，我真正发现的是保持它赤裸裸。我尽量不在工具栏中放置超过2个按钮，其中一个通常显示菜单。我有点撕毁了你的观点，但这里有一个例子：