data view

by Johan Vandeplas

HTML

<script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">

CSS

/* complete component */
.blue {
    background-color: blue;
}
/* every item */
.blue .x-dataview-item {
    margin: 5px;
    background-color: green;
}
/* every item */
.blue .myItem {
    margin: 5px;
    background-color: green;
}
/* using css */
.blue .myItem:hover {
    margin: 5px;
    background-color: red;
}
/* using the class set by js (little slower) */
.blue .x-view-over {
     background-color: pink;
}

JavaScript

Ext.define('Ext.chooser.IconBrowser', {
    extend: 'Ext.view.View',
    alias: 'widget.iconbrowser',

    uses: 'Ext.data.Store',

    singleSelect: true,
    overItemCls: 'x-view-over',
    itemSelector: 'div.thumb-wrap',
    itemCls: 'myItem', /* deze param was 't wss */
    cls: "blue",
    baseCls: "blue",
    componentClass: "blue",

    store: Ext.create('Ext.data.Store', {
        fields: ['name', 'thumb'],
        data: [{
            name: 'CCCCC',
            thumb: 'http://icons.iconarchive.com/icons/iconexpo/speech-balloon-green/32/speech-balloon-green-c-icon.png'
        },
        {
            name: 'EEEEE',
            thumb: 'http://icons.iconarchive.com/icons/iconexpo/speech-balloon-green/32/speech-balloon-green-e-icon.png'
        },
        {
            name: 'RRRRR',
            thumb: 'http://icons.iconarchive.com/icons/iconexpo/speech-balloon-green/32/speech-balloon-green-r-icon.png'
        },
        {
            name: 'EEEEE',
            thumb: 'http://icons.iconarchive.com/icons/iconexpo/speech-balloon-green/32/speech-balloon-green-e-icon.png'
        },{
            name: 'SSSSS',
            thumb: 'http://icons.iconarchive.com/icons/iconexpo/speech-balloon-green/32/speech-balloon-green-s-icon.png'
        }],
        proxy: {
            type: 'memory'
        }
    }),

    itemTpl: Ext.create('Ext.XTemplate',
        '<div class="thumb-wrap">',
        '<div class="thumb">', (!Ext.isIE6 ? '<img src="{thumb}" />' : '<div style="width:74px;height:74px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'icons/{thumb}\')"></div>'),
        '</div>',
        '<span>{name}</span>',
        '</div>')
});

Ext.create('Ext.chooser.IconBrowser', {
    renderTo: Ext.getBody()
});