我正在使用一个sencha应用程序，我们有 3 个选项卡面板，但想向选项卡栏添加一个额外的按钮，而不是滑动到选项卡，只是在第一个tabpanel. 例如，如果您在第一个选项卡上并按下按钮，则覆盖面板将显示在顶部。如果您在第三个选项卡面板上，它将带您回到第一个选项卡面板tabpanel并覆盖按钮面板。
我可以显示按钮，但不能让它只用带有按钮的面板覆盖选项卡面板。
主面板：
Ext.define("MyApp.view.Main", {
extend: 'Ext.Panel',
requires: ['Ext.TitleBar', 'Ext.tab.Panel'],
config: {
fullscreen: true,
id: 'viewMain',
layout: 'vbox',
items: [
{
xtype: 'topbar'
},
{
xtype: 'tabpanel',
tabBarPosition: 'bottom',
flex: 1,
id: 'mainTabs',
cardSwitchAnimation: false,
animation: false,
ui: 'bottom',
items: [
{
xtype: 'mappanel',
id: 'mapPanel'
},
{
xtype: 'showbutton'
},
{
xtype: 'searchpanel'
},
{
xtype: 'directionspanel'
},
{
xtype: 'rcpanel'
}
]
}
]
}
});
显示按钮：
Ext.define("MyApp.view.ShowButton", {
extend: 'Ext.Button',
requires: ['Ext.Button'],
xtype: 'showbutton',
config: {
title: 'Show',
iconCls: 'locate4',
id: 'showBtn',
text: 'OK',
id: 'showBtn',
iconCls: 'locate4',
iconMask: true,
handler: function () {
this.fireEvent('onShowBar', this);
}
}
});
显示控制器
Ext.define('MyApp.controller.ShowController', {
extend: 'MyApp.controller.BaseController',
config: {
refs: {
},
control: {
}
},
//called when the Application is launched, remove if not needed
launch: function(app) {
},
onShowBar: function () {
var newShowBar = {
xtype: 'showBar',
docked: 'bottom'
};
this.add([newShowBar]);
}
});
显示栏：
Ext.define("MyApp.view.ShowBar", {
extend: 'Ext.Panel',
xtype: 'showbar',
config: {
iconCls: 'locate4',
docked: 'bottom',
modal: false,
style: 'opacity:0.8',
items: [
{
iconCls: 'home',
iconMask: true,
poiGroup: 'accomm'
},
{
iconCls: 'star',
iconMask: true,
poiGroup: 'attractions'
}/*,
{
iconCls: 'hotoffer',
iconMask: true,
poiGroup: 'membersavings'
}*/
]
}
});