PDA

View Full Version : Button's menu position moved after ext-js upgrade.



kanil01
15 Apr 2013, 2:25 PM
I've been using ext-js 4.1. And our code for the button's menu worked fine. And position for that menu was right - it was attached to the button. After upgrading it to 4.2 the button's menu position was brokken (see attachment - the menu is far away from "action" button. In the attachment the first button in the row is pressed).
I've fixed this issue by adding this code (see first
below) to the Button's menu code. But after upgrading it to ext-js 4.2.1.744 the position is brokken again.
Please help.

[CODE]var btnId = document.getElementById(btn.id);
var offsetHeight = btnId.offsetHeight;

var rect = btnId.getBoundingClientRect();
var top = rect.top + offsetHeight;
var left = rect.left;
var right = rect.right;

if (!btn.menu.rendered){
btn.menu.doAutoRender();
}
btn.menu.lastBox = {};
btn.menu.lastBox.x = left;
btn.menu.lastBox.y = top;
btn.menu.lastBox.invalid = false;




function fwTaskMenu(container, nestTask, objectType, uniqueName, tasksToShow, taskTags, buttonName, toolTip) {
Ext.onReady(function() {
var btnHandler = function(btn) {
btn.el.frame();
}
var menuItems = [];

buttonName = 'Actions';

var b = new Ext.Button({
renderTo : container,
text : buttonName,
handler : btnHandler,
menu: menuItems,
showMenu : function(){
if (this.rendered && this.menu) {
var btn = this;
btn.disabled = true;
if (this.menu.isVisible()) {
this.menu.hide();
}

if (btn.menu.items.getCount() == 0) {
// make ajax request to tasks servlet
var servletParams = {
"nestTask": nestTask,
"objectType": objectType,
"uniqueName": uniqueName,
"tasksToShow": tasksToShow,
"taskTags": taskTags
}
var fwtasks = fwSessionServletURL('fwtasks');
btn.el.frame(null, 4);
Ext.Ajax.request({
url: fwtasks,
params: servletParams,
success: function(response, opts) {
var res = response.responseText;
var result = Ext.JSON.decode(res);
for (i = 0; i < result.tasks.length; i++) {
btn.menu.add({
text : result.tasks[i].name,
href : result.tasks[i].link
});
}

btn.menu.ownerCt = btn;
btn.menu.show(btn.el, btn.menuAlign);
btn.el.stopAnimation() ;
btn.disabled = false;

},
failure: function(response, opts) {
Ext.Msg.alert('Error', 'Unable to determine actions for this object.');
btn.el.stopAnimation() ;
btn.disabled = false;
//console.log('server-side failure with status code ' + response.status);
},

timeout: 120000
});
}
else {
btn.menu.ownerCt = btn;
btn.menu.show(btn.el, btn.menuAlign);
btn.disabled = false;
}
}
return this;
},
listeners: {
menuhide: function(){
this.focus();
}
}
});
});
}

Phil Guerrant
17 Apr 2013, 8:13 AM
Your use of the show() (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.Component-method-show) method is incorrect, the second parameter is a callback function, not an align position.


btn.menu.show(btn.el, btn.menuAlign);

I think the method you are looking for is showBy() (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.Component-method-showBy)


btn.menu.showBy(btn.el, btn.menuAlign);