ENYO Lis whit Images

Demo de lista de imágenes con ENYO

by EDWIN MAURICIO QUISHPE MALDONADO

CSS

.list{
    height:100%;
}

JavaScript

enyo.kind({
    name:"ImageSelector",
    kind: 'FittableRows',
    classes: 'list',
    fit:true,
    components:[
        {content:"imagenes"},
        {kind: "List", fit: true, onSetupItem: "setupItem",classes:"list", components: [
				{name: "item", style: "padding: 10px;", classes: "panels-sample-flickr-item enyo-border-box", ontap: "itemTap", components: [
					{name: "thumbnail", fit: true, kind: "Image", classes: "panels-sample-flickr-thumbnail"},
					{name: "title", fit: true, classes: "panels-sample-flickr-title"}
			]}
        ]}   
    ],
    create: function(inSender,inEvent){
		this.inherited(arguments);
        this.$.list.setCount(this.results.length);
	},
    
    setupItem: function(inSender, inEvent) {
        console.log("pasa");
		var i = inEvent.index;
		var item = this.results[i];
        console.log(this.results[i]);
        
		this.$.thumbnail.setSrc(item.thumbnail);
		this.$.title.setContent("imagen");
		return true;
	},
    
    results:[
        {thumbnail:"http://findicons.com/files/icons/2833/flatastic_part_1/128/comment.png"},
        {thumbnail:"http://findicons.com/files/icons/2833/flatastic_part_1/128/comment.png"},
        {thumbnail:"http://findicons.com/files/icons/2833/flatastic_part_1/128/comment.png"},
        {thumbnail:"http://findicons.com/icon/download/609083/chart/128/png"},
        {thumbnail:"http://findicons.com/files/icons/2833/flatastic_part_1/128/comment.png"}
    ]
});

new ImageSelector().renderInto(document.body);