|
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----------------------
|
