trying to add image to PickerButton

Hi,

I'm trying to add a small arrow image to PickerButtons to make them look more like drop down lists, but when I do so, the button text is never updated when an item from the picker is selected. Here's how I tried to do it:

{kind: "onyx.PickerDecorator", onSelect: "itemSelected", components: [
    {kind: "onyx.PickerButton", style: "border: 0px; width: 100%", components: [
        {classes: "decorator-inner-arrow"},
        {content: "Choose one..."}
    ]},
    {kind: "onyx.Picker", components: [
        {content: "Item 1"},
        {content: "Item 2", active: true},
        {content: "Item 3"}
    ]},
]},
This will always display "Choose one..." on the button. If I leave the content out, there's no text displayed on the button at any time. If I leave out the components part in the PickerButton the current choice is displayed on the button, but of course then there's no arrow on the button.
Am I deleting something important by (re-)defining the components inside the PickerButton?

Thanks,
Ralf

Comments

  • I solved it like this:
    enyo.kind({
      name: "ita.ArrowPickerButton",
      kind: onyx.PickerButton,
      
    	published: {
    		buttonText: ""
    	},
      
      components: [
        {name: "buttonText"},
        {tag: "img", style: "float: right; margin: 0px; padding: 0px", attributes: {src: "./resources/menu-arrow.png"}},
      ],
      
      create: function() {
        this.inherited(arguments);
        this.buttonTextChanged();
      },
    
      buttonTextChanged: function() {
        this.$.buttonText.setContent(this.buttonText);
      },
    
    	change: function(inSender, inEvent) {
    		if (inEvent.content !== undefined){
    			this.setButtonText(inEvent.content);
    		}
    	},
    
    });
    
Sign In or Register to comment.