Question

我有一个工具栏，右边对齐几个按钮。但是当我添加一些冗长的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>',
                            }

                            ]

            }, 

        ]

 }
});

如何安装工具栏中的所有按钮？任何帮助表示赞赏。

Answer 1

在config中添加以下行解决了问题。

 layout:'fit',

Answer 2

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

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

2 个答案: