extjs-gpl/examples/classic/view/chooser/IconBrowser.js

GPL licensed version of Sencha Ext JS

/**
 * @class Ext.chooser.IconBrowser
 * @extends Ext.view.View
 *
 * This is a really basic subclass of Ext.view.View. All we're really doing here is providing the template that dataview
 * should use (the tpl property below), and a Store to get the data from. In this case we're loading data from a JSON
 * file over AJAX.
 */
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',
    tpl: [
        // '<div class="details">',
            '<tpl for=".">',
                '<div class="thumb-wrap">',
                    '<div class="thumb">',
                        '<img src="icons/{thumb}" />',
                    '</div>',
                    '<span>{name}</span>',
                '</div>',
            '</tpl>'
        // '</div>'
    ],
    
    initComponent: function() {
        this.store = Ext.create('Ext.data.Store', {
            autoLoad: true,
            fields: ['name', 'thumb', 'url', 'type'],
            remoteSort: false,
            sorters: 'type',
            proxy: {
                type: 'ajax',
                url : 'icons.json',
                reader: {
                    type: 'json'
                }
            }
        });
        
        this.callParent(arguments);
    }
});