如何在按钮单击时打开面板
How to open a Panel on Button click
我想在 header 中单击的按钮下打开一个面板 window。面板应显示在按钮下方(与 header 对齐):我尝试:
{
xtype:'button',
height: '100%',
text: Strings.Notifications,
glyph: 'xf142@FontAwesome',
reference: 'settingsNotificationsButton',
cls :'headerButtonsCls',
listeners: {
click: function () {
new Ext.form.Panel({
width: 200,
height: 200,
title: 'Foo',
floating: true,
closable: false
}).show();
}
}
}
但是上面的代码将屏幕中间的面板显示为我不想要的模态(正如我所说,我想要它就在 header 下方)
那么如何实现呢?
谢谢.
对你有用吗?
var windowPanel = Ext.create('Ext.Panel', {
bodyStyle: 'background: #ffff00;',
border: true,
height: 200,
width: 200,
hidden: true
});
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'Show/Hide Panel',
handler: function () {
if (windowPanel.isHidden()) {
windowPanel.show();
} else {
windowPanel.hide();
}
}
},
windowPanel
]
});
我以 Muzaffers 的答案为基础,并添加了使用事件坐标的功能:
var windowPanel = Ext.create('Ext.Panel', {
bodyStyle: 'background: #ffff00;',
border: true,
height: 200,
width: 200,
floating:true
});
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'Show/Hide Panel',
handler: function (btn, event) {
windowPanel.showAt(event.getXY())
}
}
]
});
这里是fiddle:https://fiddle.sencha.com/#fiddle/3a8j&view/editor
我想在 header 中单击的按钮下打开一个面板 window。面板应显示在按钮下方(与 header 对齐):我尝试:
{
xtype:'button',
height: '100%',
text: Strings.Notifications,
glyph: 'xf142@FontAwesome',
reference: 'settingsNotificationsButton',
cls :'headerButtonsCls',
listeners: {
click: function () {
new Ext.form.Panel({
width: 200,
height: 200,
title: 'Foo',
floating: true,
closable: false
}).show();
}
}
}
但是上面的代码将屏幕中间的面板显示为我不想要的模态(正如我所说,我想要它就在 header 下方) 那么如何实现呢? 谢谢.
对你有用吗?
var windowPanel = Ext.create('Ext.Panel', {
bodyStyle: 'background: #ffff00;',
border: true,
height: 200,
width: 200,
hidden: true
});
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'Show/Hide Panel',
handler: function () {
if (windowPanel.isHidden()) {
windowPanel.show();
} else {
windowPanel.hide();
}
}
},
windowPanel
]
});
我以 Muzaffers 的答案为基础,并添加了使用事件坐标的功能:
var windowPanel = Ext.create('Ext.Panel', {
bodyStyle: 'background: #ffff00;',
border: true,
height: 200,
width: 200,
floating:true
});
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'Show/Hide Panel',
handler: function (btn, event) {
windowPanel.showAt(event.getXY())
}
}
]
});
这里是fiddle:https://fiddle.sencha.com/#fiddle/3a8j&view/editor