enyo pull down list

by Mazahar Shaikh

CSS

.onyx-selected {
    background-color:blue;
}

JavaScript

enyo.kind({
    name: "MyItem",
    //I dont want a wrapper so I set this to null,
    // avoiding the extra div will save 100 to 800+ extra divs
    //tag: null,
    components: [
        {name: "name", tag: "p"},
        {name: "count", tag: "strong"}
    ],
    setName: function(name) {
        this.$.name.setContent(name);
    },
    setCount: function(number) {
        this.$.count.setContent(number);
    },
    setMetaData: function(itemId) {
        this.$.name.setAttribute('data-id', itemId);
    }
});

enyo.kind({
    name: "MyList",
    classes: "enyo-fit",
    components: [
        {name: "list", kind: "PulldownList", style:"height:400px",
         onSetupItem: "setupItem", onPullRelease: "pullRelease", onPullComplete: "pullComplete", count:20000, rowsPerPage:20, components: [
            {name: "item", kind: "MyItem"}
        ]}
    ],
    // *** Ommiting some code here
    setupItem: function (inSender, inEvent) {
        var i = inEvent.index;
        this.$.item.setName("Person " + i);
        this.$.item.setCount(i);
        this.$.item.setMetaData(i);
        
        this.$.item.addRemoveClass("onyx-selected", inEvent.selected);
    }
});

new MyList().write();