如何在 Sencha 中添加 Popover UI 元素

发布于 2024-12-21 12:17:24 字数 799 浏览 1 评论 0原文

我有一个 TabPanel 停靠在应用程序的底部。它有几个选项卡。我不想为“设置”选项卡打开一个新面板，而是想添加一个弹出列表。单击列表中的任何项目时，可能会/可能不会打开新面板。

我不知道如何在 Sencha 中添加 Popover。有人可以帮忙吗？

这是我当前的代码：

“设置”选项卡（需要是一个弹出窗口，而不是当前的面板）-->

App.views.Settings = Ext.extend(Ext.Panel, {
  title : 'Settings',
  id : 'Settings',
  iconCls : 'settings',

  floating : true,
  modal : true, 
  hideOnMaskTap : true,
  width : '20',
  height : '20'  
});

主选项卡面板（上面的设置面板位于其中）

App.views.RootTab = Ext.extend (Ext.TabPanel, {

fullscreen : true,     
tabBar : {
    dock : 'bottom',
    layout : {pack: 'center'}
},
cardSwitchAnimation : {
    type : 'slide',
    cover : true
},
defaults : {
    scroll : 'vertical'
},
items : [
    {xtype : 'MainView'},
    {xtype : 'Settings'}
]
})

原文

I have a TabPanel docked at the bottom of the application. It has several tabs. Instead of opening a new Panel for the Settings Tab, I wanted to add a popover list. On clicking any of the items in the list, where a new panel may/may not open.

I have no idea how to add Popovers in Sencha. Can anyone help ?

This is my code currently :

The Settings Tab (which needs to be a popover instead of the panel that it is currently) -->

App.views.Settings = Ext.extend(Ext.Panel, {
  title : 'Settings',
  id : 'Settings',
  iconCls : 'settings',

  floating : true,
  modal : true, 
  hideOnMaskTap : true,
  width : '20',
  height : '20'  
});

The main TabPanel (inside which the above Settings Panel is)

App.views.RootTab = Ext.extend (Ext.TabPanel, {

fullscreen : true,     
tabBar : {
    dock : 'bottom',
    layout : {pack: 'center'}
},
cardSwitchAnimation : {
    type : 'slide',
    cover : true
},
defaults : {
    scroll : 'vertical'
},
items : [
    {xtype : 'MainView'},
    {xtype : 'Settings'}
]
})

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

初懵 2024-12-28 12:17:24

尝试 App.views.Settings.show('pop');

注意：如果您的问题只是将面板显示为弹出窗口，那么问题已经被提出并得到解答此处

希望这会有所帮助。

回复收藏 0 原文

情感失落者 2024-12-28 12:17:24

作为这篇文章指出，sencha 正是您所需要的。

试试这个：

new Ext.Panel({
fullscreen : true,
items      : [
    {
        xtype  : 'toolbar',
        docked : 'top',
        items  : [
            {
                text    : 'Open',
                handler : function (button) {
                    var panel = new Ext.Panel({
                        height : 200,
                        width  : 200,
                        html   : 'Hello'
                    });

                    panel.showBy(button, 'tr-bc?');
                }
            }
        ]
    }
]});

As this post points out, sencha have very exactly what you need.

Try this :

new Ext.Panel({
fullscreen : true,
items      : [
    {
        xtype  : 'toolbar',
        docked : 'top',
        items  : [
            {
                text    : 'Open',
                handler : function (button) {
                    var panel = new Ext.Panel({
                        height : 200,
                        width  : 200,
                        html   : 'Hello'
                    });

                    panel.showBy(button, 'tr-bc?');
                }
            }
        ]
    }
]});

回复收藏 0 原文

~没有更多了~