PDA

View Full Version : Menu with Ext.ux.SliderZone bug?



Maxrunner
25 Feb 2010, 6:26 AM
So im currently using the Ext.ux.SliderZone extension to use with the Area Sliders. Right now i can create multiple areas. Recently i've added the option to right click in any of the Areas to show a menu. The problem appears when i have for example 2 Areas and i keep right clicking on one and then the other. Eventually one of the menus wont disappear after i right click on it and it gets stuck. Here's the code :


Ext.extend(Ext.ux.RangeSlider, Ext.ux.Slider, {
init: function(parentSlideZone) {
this.type = parentSlideZone.type;
var menu=null;
var div=this;//get div parentelement containing the close image

var el = Ext.DomHelper.append(parentSlideZone.el, {
tag: 'div',
id: Ext.id(),
title: 'Area ' + this.name,
style: 'position:absolute;'
}, true);



//this.el.addClass(parentSlideZone.cls);
switch(this.type) { case 'horizontal':
var w = Math.abs(this.value[0] - this.value[1]) / (parentSlideZone.maxValue - parentSlideZone.minValue) * parentSlideZone.size;
var h = parentSlideZone.sliderHeight;
var handles = 'e,w';
this.pointer = 'w-resize';
break;

case 'vertical':
var w = parentSlideZone.sliderWidth;
var h = Math.abs(this.value[0] - this.value[1]) / (parentSlideZone.maxValue - parentSlideZone.minValue) * parentSlideZone.size;
var handles = 'n,s';
this.pointer = 'n-resize';
break;

case 'area':

menu=new Ext.menu.Menu({
id: 'menu',floating:true,allowOtherMenus:true
, items: [
// these items will render as dropdown menu items when the arrow is clicked:

//{text: 'Expand Area',menu : new Ext.menu.Menu({items: [{text:'Full '},{text:'subitem 2'}]}), handler: function(btn){alert(btn.text);}},
{text: 'Close Area', handler: function(btn){
//alert(btn.text);
menu.destroy();
parentSlideZone.remove(div);
}},
{text: 'New Area', handler: function(btn){
alert(btn.text);
parentSlideZone.remove(div);
}}
]
});


el.on({
'contextmenu': function() {
menu.show(el);
},
scope:this,
preventDefault:true
});

this.on({'destroy':function(){
menu.destroy();
},scope:this});


var w = Math.abs(this.value[0][0] - this.value[0][1]) / (parentSlideZone.maxValue[0] - parentSlideZone.minValue[0]) * parentSlideZone.size[0];
var h = Math.abs(this.value[1][0] - this.value[1][1]) / (parentSlideZone.maxValue[1] - parentSlideZone.minValue[1]) * parentSlideZone.size[1];
var handles = 'all';
this.pointer = 'move';
break;
}

Here's a pic showing it:

http://img96.imageshack.us/img96/7149/menuslider.th.png (http://img96.imageshack.us/i/menuslider.png/)