I have built a select list widget, which when used once on a page works fine. However, when you add another (same) widget to the page, they each trigger the others onselect event. This I do not understand!
 
You can see what I mean here...
 
 
The alert that comes up when you select something is triggered in the onselect event for the selectList, and is the reference to the label which is the always visible part of the selectlist.
 
Thw widget code is below (selectlist2.js). Any help would be greatly appreciated.
 
Ben
 
----------------code start------------------
//define a function to set the list padding (not included in list.js)
List.prototype.setPadding = function(b){
 this.listStyle.padding = b;
 if (this.created) this.arrangeItems();
};
 
//imgW is the width of the arrow image to control the drop-down
//numItems is the number of items which will be added to the list
function selectList(x,y,w,h,imgW,numItems,maxDisplayItems,borderThickness,zIndex){
 this.superClass=DynLayer
 this.superClass()
 this.id="selectList"+(selectList.Count++)
 
 this.moveTo(x || 100, y || 100)
 this.setSize(w+(borderThickness*2)+100,h+(borderThickness*2))
 this.setZIndex(zIndex)
 
 var l=new EventListener(this)
 l.oncreate=function(e) {
  var o=e.getTarget()
  
  //o.label is the label which displays the selected item
  o.label = new Label('')
  o.label.moveTo(borderThickness,borderThickness)
  o.label.setBgColor('#eeeeee')
  o.label.setWidth(w-imgW)
  o.label.setHeight(h)
  
  //o.list is the drop-down list which presents the available options
  o.list = new List()
  o.list.moveTo(0,0-(numItems*h)) //move the list up so that it is hidden behind the label until the button is clicked
  o.list.setWidth(w+(borderThickness*2))
  o.list.setBgColor('#000000')
  o.list.boldOnSelect(true)
  o.list.setPadding(1)
  
  //o.button is the clickable button to activate the drop-down
  o.button = new DynLayer(null,(w-imgW)+borderThickness,0,imgW,h+borderThickness)
  o.button.imgUp = new Image()
  o.button.imgUp.src = " 'dynapi2_52/dynapi/src/lib/dynapi/images/scrollpane/arrowdn0.gif'  o.button.imgDn = new Image()
  o.button.imgDn.src = " 'dynapi2_52/dynapi/src/lib/dynapi/images/scrollpane/arrowdn1.gif'  o.button.setBgImage(o.button.imgUp.src)
  
  //set the borders of the whole widget
  o.topBorder = new DynLayer(null,0,0,w+(borderThickness*2),borderThickness,'black')
  o.bottomBorder = new DynLayer(null,0,h+borderThickness,w+(borderThickness*2),borderThickness,'black')
  o.leftBorder = new DynLayer(null,0,0,borderThickness,h+(borderThickness*2),'black')
  o.rightBorder = new DynLayer(null,w+borderThickness,0,borderThickness,h+(borderThickness*2),'black')
  
  //just insert o.?Border.setBgImage to create a styled border
  
  o.addChild(o.list)
  o.addChild(o.label)
  o.addChild(o.button)
  o.addChild(o.topBorder)
  o.addChild(o.bottomBorder)
  o.addChild(o.leftBorder)
  o.addChild(o.rightBorder)
  
  o.button.events = new EventListener(o.button)
   o.button.events.>    o.button.setBgImage(o.button.imgDn.src)
   }
 
   o.button.events.>    if (!o.open) {
     o.setSize(w+(borderThickness*2),(numItems*h)+h+(borderThickness*2))
     o.list.slideTo(0,h+(borderThickness*2),20,5)
     o.open=true
    } else {
     o.setSize(w+(borderThickness*2),h+(borderThickness*2))
     o.list.slideTo(0,0-((maxDisplayItems*h)-h),20,5)
     o.open=false
    }
    o.button.setBgImage(o.button.imgUp.src)
   }
  o.button.addEventListener(o.button.events)
  
  o.list.events = new EventListener(o.list)
   o.list.events.onselect=function(e){
    o.label.setHTML(o.list.getSelectedItem().getHTML())
    alert(o.label)
    o.open=false
    o.list.slideTo(0,0-((maxDisplayItems*h)-h),20,5)
    o.setSize(w+(borderThickness*2),h+(borderThickness*2))
   }
  o.list.addEventListener(o.list.events)
  
  o.events = new EventListener(o)
   o.events.>    if (o.open) {
     o.open=false
     o.list.slideTo(0,0-(numItems*h),20,5)
     o.setSize(w+(borderThickness*2),h+(borderThickness*2))
    }
   }
  o.addEventListener(o.events)
 }
 this.addEventListener(l)
 
 return this
}
selectList.Count=0
selectList.prototype=new DynLayer()
selectList.prototype.getSubClass=function() { return selectList }
-----------------code end----------------------

Reply via email to