examples/view/chooser/IconBrowser.js

   1 /**
   2  * @class Ext.chooser.IconBrowser
   3  * @extends Ext.view.View
   4  * @author Ed Spencer
   5  *
   6  * This is a really basic subclass of Ext.view.View. All we're really doing here is providing the template that dataview
   7  * should use (the tpl property below), and a Store to get the data from. In this case we're loading data from a JSON
   8  * file over AJAX.
   9  */
  10 Ext.define('Ext.chooser.IconBrowser', {
  11     extend: 'Ext.view.View',
  12     alias: 'widget.iconbrowser',
  13
  14     uses: 'Ext.data.Store',
  15
  16         singleSelect: true,
  17     overItemCls: 'x-view-over',
  18     itemSelector: 'div.thumb-wrap',
  19     tpl: [
  20         // '<div class="details">',
  21             '<tpl for=".">',
  22                 '<div class="thumb-wrap">',
  23                     '<div class="thumb">',
  24                     (!Ext.isIE6? '<img src="icons/{thumb}" />' :
  25                     '<div style="width:74px;height:74px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'icons/{thumb}\')"></div>'),
  26                     '</div>',
  27                     '<span>{name}</span>',
  28                 '</div>',
  29             '</tpl>'
  30         // '</div>'
  31     ],
  32
  33     initComponent: function() {
  34         this.store = Ext.create('Ext.data.Store', {
  35             autoLoad: true,
  36             fields: ['name', 'thumb', 'url', 'type'],
  37             proxy: {
  38                 type: 'ajax',
  39                 url : 'icons.json',
  40                 reader: {
  41                     type: 'json',
  42                     root: ''
  43                 }
  44             }
  45         });
  46
  47         this.callParent(arguments);
  48         this.store.sort();
  49     }
  50 });