examples/view/multisort-dataview.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 Ext.onReady(function() {
   8     var store = new Ext.data.ArrayStore({
   9         proxy   : new Ext.data.MemoryProxy(),
  10         fields  : ['hasEmail', 'hasCamera', 'id', 'name', 'price', 'screen', 'camera', 'color', 'type', 'reviews', 'screen-size'],
  11         sortInfo: {
  12             field    : 'name',
  13             direction: 'ASC'
  14         }
  15     });
  16
  17     store.loadData([
  18         [true,  false, 1,  "LG KS360",                              70,  "240 x 320 pixels", 2,   "Pink",             "Slider",             359, 2.400000],
  19         [true,  true,  2,  "Sony Ericsson C510a Cyber-shot",        180, "320 x 240 pixels", 3.2, "Future black",     "Candy bar",          11,  0.000000],
  20         [true,  true,  3,  "LG PRADA KE850",                        155, "240 x 400 pixels", 2,   "Black",            "Candy bar",          113, 0.000000],
  21         [true,  true,  4,  "Nokia N900 Smartphone 32 GB",           499, "800 x 480 pixels", 5,   "Black",            "Slider",             320, 3.500000],
  22         [true,  false, 5,  "Motorola RAZR V3",                      65,  "96 x 80 pixels",   0.3, "Silver",           "Folder type phone",  5,   2.200000],
  23         [true,  true,  6,  "LG KC910 Renoir",                       180, "240 x 400 pixels", 8,   "Black",            "Candy bar",          79,  0.000000],
  24         [true,  true,  7,  "BlackBerry Curve 8520 BlackBerry",      135, "320 x 240 pixels", 2,   "Frost",            "Candy bar",          320, 2.640000],
  25         [true,  true,  8,  "Sony Ericsson W580i Walkman",           70,  "240 x 320 pixels", 2,   "Urban gray",       "Slider",             1,   0.000000],
  26         [true,  true,  9,  "Nokia E63 Smartphone 110 MB",           170, "320 x 240 pixels", 2,   "Ultramarine blue", "Candy bar",          319, 2.360000],
  27         [true,  true,  10, "Sony Ericsson W705a Walkman",           274, "320 x 240 pixels", 3.2, "Luxury silver",    "Slider",             5,   0.000000],
  28         [false, false, 11, "Nokia 5310 XpressMusic",                170, "320 x 240 pixels", 2,   "Blue",             "Candy bar",          344, 2.000000],
  29         [false, true,  12, "Motorola SLVR L6i",                     50,  "128 x 160 pixels", 2,   "Black",            "Candy bar",          38,  0.000000],
  30         [false, true,  13, "T-Mobile Sidekick 3 Smartphone 64 MB",  170, "240 x 160 pixels", 1.3, "Green",            "Sidekick",           115, 0.000000],
  31         [false, true,  14, "Audiovox CDM8600",                      50,  "240 x 160 pixels", 2,   "Blue",             "Folder type phone",  1,   0.000000],
  32         [false, true,  15, "Nokia N85",                             70,  "320 x 240 pixels", 5,   "Copper",           "Dual slider",        143, 2.600000],
  33         [false, true,  16, "Sony Ericsson XPERIA X1",               180, "800 x 480 pixels", 3.2, "Solid black",      "Slider",             14,  0.000000],
  34         [false, true,  17, "Motorola W377",                         135, "128 x 160 pixels", 0.3, "Black",            "Folder type phone",  35,  0.000000],
  35         [true,  true,  18, "LG Xenon GR500",                        50,  "240 x 400 pixels", 2,   "Red",              "Slider",             658, 2.800000],
  36         [true,  false, 19, "BlackBerry Curve 8900 BlackBerry",      135, "480 x 360 pixels", 3.2, "Silver",           "Candy bar",          21,  2.440000],
  37         [true,  false, 20, "Samsung SGH U600 Ultra Edition 10.9",   135, "240 x 320 pixels", 3.2, "Rainbow",          "Slider",             169, 2.200000]
  38     ]);
  39
  40     var dataview = new Ext.DataView({
  41         store: store,
  42         tpl  : new Ext.XTemplate(
  43             '<ul>',
  44                 '<tpl for=".">',
  45                     '<li class="phone">',
  46                         '<img width="64" height="64" src="images/phones/{[values.name.replace(/ /g, "-")]}.png" />',
  47                         '<strong>{name}</strong>',
  48                         '<span>{price:usMoney} ({camera} MP)</span>',
  49                     '</li>',
  50                 '</tpl>',
  51             '</ul>'
  52         ),
  53
  54         plugins : [
  55             new Ext.ux.DataViewTransition({
  56                 duration  : 550,
  57                 idProperty: 'id'
  58             })
  59         ],
  60         id: 'phones',
  61
  62         itemSelector: 'li.phone',
  63         overClass   : 'phone-hover',
  64         singleSelect: true,
  65         multiSelect : true,
  66         autoScroll  : true
  67     });
  68
  69     var tbar = new Ext.Toolbar({
  70         items  : ['Sort on these fields:', ''],
  71         plugins: [new Ext.ux.ToolbarReorderer()],
  72
  73         listeners: {
  74             scope    : this,
  75             reordered: function(button) {
  76                 changeSortDirection(button, false);
  77             }
  78         }
  79     });
  80
  81     new Ext.Panel({
  82         title: 'Animated DataView',
  83         layout: 'fit',
  84         items : dataview,
  85         height: 615,
  86         width : 800,
  87         tbar  : tbar,
  88         renderTo: 'docbody'
  89     });
  90
  91     tbar.add(createSorterButton({
  92         text: 'Megapixels',
  93         sortData: {
  94             field: 'camera',
  95             direction: 'DESC'
  96         }
  97     }));
  98
  99     tbar.add(createSorterButton({
 100         text: 'Price',
 101         sortData: {
 102             field: 'price',
 103             direction: 'DESC'
 104         }
 105     }));
 106
 107     //perform an initial sort
 108     doSort();
 109
 110     //The following functions are used to get the sorting data from the toolbar and apply it to the store
 111
 112     /**
 113      * Tells the store to sort itself according to our sort data
 114      */
 115     function doSort() {
 116         store.sort(getSorters(), "ASC");
 117     };
 118
 119     /**
 120      * Callback handler used when a sorter button is clicked or reordered
 121      * @param {Ext.Button} button The button that was clicked
 122      * @param {Boolean} changeDirection True to change direction (default). Set to false for reorder
 123      * operations as we wish to preserve ordering there
 124      */
 125     function changeSortDirection(button, changeDirection) {
 126         var sortData = button.sortData,
 127             iconCls  = button.iconCls;
 128
 129         if (sortData != undefined) {
 130             if (changeDirection !== false) {
 131                 button.sortData.direction = button.sortData.direction.toggle("ASC", "DESC");
 132                 button.setIconClass(iconCls.toggle("sort-asc", "sort-desc"));
 133             }
 134
 135             store.clearFilter();
 136             doSort();
 137         }
 138     };
 139
 140     /**
 141      * Returns an array of sortData from the sorter buttons
 142      * @return {Array} Ordered sort data from each of the sorter buttons
 143      */
 144     function getSorters() {
 145         var sorters = [];
 146
 147         Ext.each(tbar.findByType('button'), function(button) {
 148             sorters.push(button.sortData);
 149         }, this);
 150
 151         return sorters;
 152     }
 153
 154     /**
 155      * Convenience function for creating Toolbar Buttons that are tied to sorters
 156      * @param {Object} config Optional config object
 157      * @return {Ext.Button} The new Button object
 158      */
 159     function createSorterButton(config) {
 160         config = config || {};
 161
 162         Ext.applyIf(config, {
 163             listeners: {
 164                 click: function(button, e) {
 165                     changeSortDirection(button, true);
 166                 }
 167             },
 168             iconCls: 'sort-' + config.sortData.direction.toLowerCase(),
 169             reorderable: true
 170         });
 171
 172         return new Ext.Button(config);
 173     };
 174 });