var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap">',
'<img src="../images/warning.png" style="vertical-align: middle;" title="Warning">',
'<span class="x-editable" style="margin-left: 3px;">{text}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
);
var msg = store.proxy.lastDataTableObject.logMessages;
var topToolbar = this.gridPanel.topToolbar;
if (msg && msg.length > 0) {
//Warning Messages menu
topToolbar.insert(topToolbar.items.items.length - 1,{
text: "Warning Messages",
menu: {
xtype: 'menu',
autoScroll: true,
maxHeight: 200,
items: [
new Ext.DataView({
store: new Ext.data.SimpleStore({data: msg, fields: ['text']}),
tpl: tpl,
autoWidth: true,
multiSelect: true,
overClass: 'x-view-over',
itemSelector: 'div.thumb-wrap',
emptyText: 'No warnings to display'
})
]
}
});
topToolbar.doLayout();
我制作了这个菜单,里面有一个 DataView。我的最终目标是添加 maxHeight 并使下拉元素的右上角始终锚定到按钮元素的右下角。
以下是目前发生的情况:
在固定高度的情况下,锚定问题仍然存在,但至少菜单会按应有的方式下降:
最佳答案
您可以使用menuAlign
工具栏按钮上的config,值为tr-br
这会将您的元素(在您的情况下为菜单)右上角与目标(在您的情况下为按钮)右下角对齐。
if (msg && msg.length > 0) {
topToolbar.insert(topToolbar.items.items.length - 1,{
text: "Warning Messages",
menuAlign: 'tr-br', // Add this line here
menu: {
xtype: 'menu',
...
}
});
topToolbar.doLayout();
}
这是一个working example on Sencha's fiddle site根据您的代码供您引用。
关于javascript - extjs3下拉菜单调整位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25268530/