examples/view/multisort/Panel.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * @class Ext.multisort.Panel
  17  * @extends Ext.panel.Panel
  18  * @author Ed Spencer
  19  *
  20  *
  21  */
  22 Ext.define('Ext.multisort.Panel', {
  23     extend: 'Ext.panel.Panel',
  24
  25     width: 800,
  26     height: 450,
  27     title: 'Multisort DataView',
  28     autoScroll: true,
  29
  30     requires: ['Ext.toolbar.TextItem', 'Ext.view.View'],
  31
  32     initComponent: function() {
  33         this.tbar = Ext.create('Ext.toolbar.Toolbar', {
  34             plugins : Ext.create('Ext.ux.BoxReorderer', {
  35                 listeners: {
  36                     scope: this,
  37                     drop: function() {
  38                         this.down('dataview').store.sort(this.getSorters());
  39                     }
  40                 }
  41             }),
  42             defaults: {
  43                 listeners: {
  44                     scope: this,
  45                     changeDirection: this.updateStoreSorters
  46                 }
  47             },
  48             items: [{
  49                 xtype: 'tbtext',
  50                 text: 'Sort on these fields:',
  51                 reorderable: false
  52             }, {
  53                 xtype: 'sortbutton',
  54                 text : 'Type',
  55                 dataIndex: 'type'
  56             }, {
  57                xtype: 'sortbutton',
  58                 text : 'Name',
  59                 dataIndex: 'name'
  60             }]
  61         });
  62
  63         this.items = {
  64             xtype: 'dataview',
  65             tpl: [
  66                 '<tpl for=".">',
  67                     '<div class="item">',
  68                         (!Ext.isIE6? '<img src="../../datasets/touch-icons/{thumb}" />' :
  69                         '<div style="position:relative;width:74px;height:74px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'../../datasets/touch-icons/{thumb}\')"></div>'),
  70                         '<h3>{name}</h3>',
  71                     '</div>',
  72                 '</tpl>'
  73             ],
  74             plugins: [Ext.create('Ext.ux.DataView.Animated')],
  75             itemSelector: 'div.item',
  76             store: Ext.create('Ext.data.Store', {
  77                 autoLoad: true,
  78                 sortOnLoad: true,
  79                 storeId: 'test',
  80                 fields: ['name', 'thumb', 'url', 'type'],
  81                 proxy: {
  82                     type: 'ajax',
  83                     url : '../../datasets/sencha-touch-examples.json',
  84                     reader: {
  85                         type: 'json',
  86                         root: ''
  87                     }
  88                 }
  89             })
  90         };
  91
  92         this.callParent(arguments);
  93         this.updateStoreSorters();
  94     },
  95
  96     /**
  97      * Returns the array of Ext.util.Sorters defined by the current toolbar button order
  98      * @return {Array} The sorters
  99      */
 100     getSorters: function() {
 101         var buttons = this.query('toolbar sortbutton'),
 102             sorters = [];
 103         Ext.Array.each(buttons, function(button) {
 104             sorters.push({
 105                 property : button.getDataIndex(),
 106                 direction: button.getDirection()
 107             });
 108         });
 109
 110         return sorters;
 111     },
 112
 113     /**
 114      * @private
 115      * Updates the DataView's Store's sorters based on the current Toolbar button configuration
 116      */
 117     updateStoreSorters: function() {
 118         //FIXME: shouldn't have to make the first call
 119         this.down('dataview').store.sort();
 120         this.down('dataview').store.sort(this.getSorters());
 121     }
 122 });