How to add Popover UI Element in Sencha

1
votes

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'}
]
})
2
ipadsencha-touchtabpanelpopover

2 Answers

0
votes

try App.views.Settings.show('pop');

NOTE:If its only showing panel as popup is your issue then the question was already asked and answered here

Hope this helps.

0
votes

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?');
                }
            }
        ]
    }
]});