examples/view/multisort/Panel.js

   1 /**
   2  * @class Ext.multisort.Panel
   3  * @extends Ext.panel.Panel
   4  * @author Ed Spencer
   5  *
   6  *
   7  */
   8 Ext.define('Ext.multisort.Panel', {
   9     extend: 'Ext.panel.Panel',
  10
  11     width: 800,
  12     height: 450,
  13     title: 'Multisort DataView',
  14     autoScroll: true,
  15
  16     requires: ['Ext.toolbar.TextItem', 'Ext.view.View'],
  17
  18     initComponent: function() {
  19         this.tbar = Ext.create('Ext.toolbar.Toolbar', {
  20             plugins : Ext.create('Ext.ux.BoxReorderer', {
  21                 listeners: {
  22                     scope: this,
  23                     drop: function() {
  24                         this.down('dataview').store.sort(this.getSorters());
  25                     }
  26                 }
  27             }),
  28             defaults: {
  29                 listeners: {
  30                     scope: this,
  31                     changeDirection: this.updateStoreSorters
  32                 }
  33             },
  34             items: [{
  35                 xtype: 'tbtext',
  36                 text: 'Sort on these fields:',
  37                 reorderable: false
  38             }, {
  39                 xtype: 'sortbutton',
  40                 text : 'Type',
  41                 dataIndex: 'type'
  42             }, {
  43                xtype: 'sortbutton',
  44                 text : 'Name',
  45                 dataIndex: 'name'
  46             }]
  47         });
  48
  49         this.items = {
  50             xtype: 'dataview',
  51             tpl: [
  52                 '<tpl for=".">',
  53                     '<div class="item">',
  54                         (!Ext.isIE6? '<img src="../../datasets/touch-icons/{thumb}" />' :
  55                         '<div style="position:relative;width:74px;height:74px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'../../datasets/touch-icons/{thumb}\')"></div>'),
  56                         '<h3>{name}</h3>',
  57                     '</div>',
  58                 '</tpl>'
  59             ],
  60             plugins: [Ext.create('Ext.ux.DataView.Animated')],
  61             itemSelector: 'div.item',
  62             store: Ext.create('Ext.data.Store', {
  63                 autoLoad: true,
  64                 sortOnLoad: true,
  65                 storeId: 'test',
  66                 fields: ['name', 'thumb', 'url', 'type'],
  67                 proxy: {
  68                     type: 'ajax',
  69                     url : '../../datasets/sencha-touch-examples.json',
  70                     reader: {
  71                         type: 'json',
  72                         root: ''
  73                     }
  74                 }
  75             })
  76         };
  77
  78         this.callParent(arguments);
  79         this.updateStoreSorters();
  80     },
  81
  82     /**
  83      * Returns the array of Ext.util.Sorters defined by the current toolbar button order
  84      * @return {Array} The sorters
  85      */
  86     getSorters: function() {
  87         var buttons = this.query('toolbar sortbutton'),
  88             sorters = [];
  89         Ext.Array.each(buttons, function(button) {
  90             sorters.push({
  91                 property : button.getDataIndex(),
  92                 direction: button.getDirection()
  93             });
  94         });
  95
  96         return sorters;
  97     },
  98
  99     /**
 100      * @private
 101      * Updates the DataView's Store's sorters based on the current Toolbar button configuration
 102      */
 103     updateStoreSorters: function() {
 104         //FIXME: shouldn't have to make the first call
 105         this.down('dataview').store.sort();
 106         this.down('dataview').store.sort(this.getSorters());
 107     }
 108 });