Sencha Touch：工具栏可按住多个按钮并在超过一定数量时溢出

Posted 2023-02-26

【中文标题】Sencha Touch：工具栏可按住多个按钮并在超过一定数量时溢出

【英文标题】：Sencha Touch: Toolbar to hold mulitple buttons and overflow if more than a certain number

【发布时间】：2014-05-23 10:39:24

【问题描述】：

假设在 Sencha Touch 表单中我有 3 或 5 个操作（不是导航）按钮，例如

保存 删除 取消 打印 下载

我希望在每个表单的底部栏中显示这些按钮以保持一致性。 它们将只有在纵向模式下显示的图标和在横向模式下显示的图标+文本。

我想知道的是

是否有任何可用的component 或plugin 可以使用我上面提到的方式显示这些表单按钮？ 在纵向模式下，我只想显示 3 个按钮，然后在单击时显示一个 More 按钮（3 个垂直点），其余按钮将被显示。所以从技术上讲，如果超过一定数量，它应该处理overflow 的按钮。 例如。想想 Sencha ExtJs 中的tabs，如果您在某个数字后打开多个选项卡，屏幕上会出现一个下拉菜单以查看其余选项卡。我想要类似的东西。

我可以找到底部按钮栏的示例，但它们不符合要求。

有人可以指导我吗？

谢谢。

【参考方案1】：

也许你可以试试这个：

1.) 为视口绑定事件： 例如：

In app.js: 


Ext.Viewport.on(
   orientationchange: function(viewport, newOrientation) 
       if(newOrientation == 'landscape') 
          // make change to button like wise u want.
          // That is , your button icon + Text.
          // your code for landscape mode.
       
       else 
          // your code for portrait mode.
       
   
);

2.) 您可以在单击更多按钮时创建一个modal 面板，并在该面板中放置额外的按钮。使用 showBy 方法，并在该方法中传递按钮的对象。

例如：

showBy(btn) 

查看更多信息：http://docs.sencha.com/touch/2.3.1/#!/api/Ext.Component-method-showBy