PDA

View Full Version : Ext.menu position issues



papaja
24 Mar 2012, 6:36 AM
Hi,
I've defined one menu in view. When I use that menu in toolbar and in contextmenu, it is proprely shown from toolbar, but it's position for context menu is way off. E.g. when I click on button in toolbar to show menu, menu appears exactly where it should be. However, when I right click on a grid row menu shows up but in weird postions. It seems that e.getXY() uses something else for referencing.

Here is example code:


Ext.define('KS.view.invoice.List', {
extend: 'Ext.window.Window',
alias: 'widget.invoicelist',

title: 'Ra?uni',

layout: 'fit',
autoShow: true,
width:600,
height: 200,
initComponent: function() {
exportOOWriter = new Ext.Action({
iconCls: 'iconOOWriter',
text: 'OpenOffice Writer',
scope: this,
// disabled: true,
handler: function(widget, event) {
var rec = this.down('grid').getSelectionModel().getSelection()[0];
if (rec) {
loc = "/rpt/racun.php?ext=odt&rbr="+rec.get('number')+"&god="+rec.get('fiscalYear')+"&tip="+rec.get('typeId');
window.location = loc;
console.log(loc);
} else {
alert('Niste izabrali fakturu.');
}
}
}
);
exportMSWord = new Ext.Action({
iconCls: 'iconMSWord',
text: 'Microsoft Office Word',
scope: this,
// disabled: true,
handler: function(widget, event) {
var rec = this.down('grid').getSelectionModel().getSelection()[0];
if (rec) {
loc = "/rpt/racun.php?ext=docx&rbr="+rec.get('number')+"&god="+rec.get('fiscalYear')+"&tip="+rec.get('typeId');
window.location = loc;
console.log(loc);
} else {
alert('Niste izabrali fakturu.');
}
}
}
);
exportMenu = Ext.create('Ext.menu.Menu', {
items: [exportOOWriter, exportMSWord]
});
contextMenu = Ext.create('Ext.menu.Menu', {
items: [exportOOWriter, exportMSWord]
});
this.items = {
xtype: 'grid',
// layout: 'fit',
columns: [{
header: 'Datum',
dataIndex: 'invoiceDate',
flex: 1
},{
header: 'Broj',
dataIndex: 'number',
xtype:'templatecolumn',
tpl:'{number}/{buId}/ {typeId}',
flex: 1
},
{
header: 'Partner',
dataIndex: 'partner',
flex: 1
},
{
header: 'Ukupno',
dataIndex: 'total',
flex: 1
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Izvezi',
iconCls: 'iconExport',
menu:exportMenu}]
},
{
xtype: 'pagingtoolbar',
store: 'Invoices', // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
viewConfig: {
stripeRows: true,
listeners: {
itemcontextmenu: function(view, rec, node, index, e) {
e.stopEvent();
console.log(e.getXY());
p = [e.getX()-450,e.getY()-210];
console.log(p);
contextMenu.showAt(e.getXY());
return false;
}
}
},
store: 'Invoices'
};

this.callParent(arguments);
}
});


Notice that exportMenu and contextMenu are identical. If I replace contextMenu with exportMenu, exportMenu is not displayed next to cursor when I right click.

Another annoyance is that when I use exportMenu in both locations (toolbar and context menu), and after I right click on grid, it seems like button in toolbar which has this menu attached is also clicked.

Is there a way to use one definition in both places?