JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

CSS

#app {
    padding:0.4em;
}

.list-item > * {
    display:inline-block;
    margin:0.2em;
}

JavaScript

enyo.kind({
    name:"ex.App",
    components:[
        {kind:"onyx.Groupbox", style:"height:100%", layoutKind:"FittableRowsLayout", components:[
            {kind:"onyx.GroupboxHeader", content:"List in a Groupbox"},
            {name:"list", kind:"List", count:200, fit:true, onSetupItem:"setupItem", components:[
                {classes:"list-item", components:[
                    {name:"cb", kind:"onyx.Checkbox", onchange:"cbChanged"},
                    {name:"label"}
                ]}
            ]}
        ]}
    ],
    create:function() {
        this.inherited(arguments);
        this.items = [];
        for (var i=0;i<200;i++) {
            this.items[i] = {checked:false, label:"Item " + i};
        }
    },
    rendered:function() {
        this.inherited(arguments);
        this.resized();
    },
    setupItem:function(source, event) {
        var i = this.items[event.index];
        this.$.cb.setChecked(i.checked);
        this.$.label.setContent(i.label);
        //a=b/c;
    },
    cbChanged:function(source, event) {
        var i = event.index;
        this.items[i].checked = !this.items[i].checked;
        this.$.list.renderRow(i);
    }
});

new ex.App().renderInto(document.body);