examples/view/animated-dataview.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 Ext.Loader.setConfig({enabled: true});
  16 Ext.Loader.setPath('Ext.ux.DataView', '../ux/DataView/');
  17
  18 Ext.require([
  19     'Ext.data.*',
  20     'Ext.util.*',
  21     'Ext.view.View',
  22     'Ext.ux.DataView.Animated',
  23     'Ext.XTemplate',
  24     'Ext.panel.Panel',
  25     'Ext.toolbar.*',
  26     'Ext.slider.Multi'
  27 ]);
  28
  29 Ext.onReady(function() {
  30     //data to be loaded into the ArrayStore
  31     var data = [
  32         [true,  false, 1,  "LG KS360", 54, "240 x 320 pixels", "2 Megapixel", "Pink", "Slider", 359, 2.400000],
  33         [true,  true,  2,  "Sony Ericsson C510a Cyber-shot", 180, "320 x 240 pixels", "3.2 Megapixel", "Future black", "Candy bar", 11, 0.000000],
  34         [true,  true,  3,  "LG PRADA KE850", 155, "240 x 400 pixels", "2 Megapixel", "Black", "Candy bar", 113, 0.000000],
  35         [true,  true,  4,  "Nokia N900 Smartphone 32 GB", 499, "800 x 480 pixels", "5 Megapixel", "( the image of the product displayed may be of a different color )", "Slider", 320, 3.500000],
  36         [true,  false, 5,  "Motorola RAZR V3", 65, "96 x 80 pixels", "0.3 Megapixel", "Silver", "Folder type phone", 5, 2.200000],
  37         [true,  true,  6,  "LG KC910 Renoir", 242, "240 x 400 pixels", "8 Megapixel", "Black", "Candy bar", 79, 0.000000],
  38         [true,  true,  7,  "BlackBerry Curve 8520 BlackBerry", 299, "320 x 240 pixels", "2 Megapixel", "Frost", "Candy bar", 320, 2.640000],
  39         [true,  true,  8,  "Sony Ericsson W580i Walkman", 120, "240 x 320 pixels", "2 Megapixel", "Urban gray", "Slider", 1, 0.000000],
  40         [true,  true,  9,  "Nokia E63 Smartphone 110 MB", 170, "320 x 240 pixels", "2 Megapixel", "Ultramarine blue", "Candy bar", 319, 2.360000],
  41         [true,  true,  10, "Sony Ericsson W705a Walkman", 274, "320 x 240 pixels", "3.2 Megapixel", "Luxury silver", "Slider", 5, 0.000000],
  42         [false, false, 11, "Nokia 5310 XpressMusic", 140, "320 x 240 pixels", "2 Megapixel", "Blue", "Candy bar", 344, 2.000000],
  43         [false, true,  12, "Motorola SLVR L6i", 50, "128 x 160 pixels", "", "Black", "Candy bar", 38, 0.000000],
  44         [false, true,  13, "T-Mobile Sidekick 3 Smartphone 64 MB", 75, "240 x 160 pixels", "1.3 Megapixel", "", "Sidekick", 115, 0.000000],
  45         [false, true,  14, "Audiovox CDM8600", 5, "", "", "", "Folder type phone", 1, 0.000000],
  46         [false, true,  15, "Nokia N85", 315, "320 x 240 pixels", "5 Megapixel", "Copper", "Dual slider", 143, 2.600000],
  47         [false, true,  16, "Sony Ericsson XPERIA X1", 399, "800 x 480 pixels", "3.2 Megapixel", "Solid black", "Slider", 14, 0.000000],
  48         [false, true,  17, "Motorola W377", 77, "128 x 160 pixels", "0.3 Megapixel", "", "Folder type phone", 35, 0.000000],
  49         [true,  true,  18, "LG Xenon GR500", 1, "240 x 400 pixels", "2 Megapixel", "Red", "Slider", 658, 2.800000],
  50         [true,  false, 19, "BlackBerry Curve 8900 BlackBerry", 349, "480 x 360 pixels", "3.2 Megapixel", "", "Candy bar", 21, 2.440000],
  51         [true,  false, 20, "Samsung SGH U600 Ultra Edition 10.9", 135, "240 x 320 pixels", "3.2 Megapixel", "", "Slider", 169, 2.200000]
  52     ];
  53
  54     Ext.define('Mobile', {
  55         extend: 'Ext.data.Model',
  56         fields: [
  57             {name: 'hasEmail', type: 'bool'},
  58             {name: 'hasCamera', type: 'bool'},
  59             {name: 'id', type: 'int'},
  60             'name',
  61             {name: 'price', type: 'int'},
  62             'screen',
  63             'camera',
  64             'color',
  65             'type',
  66             {name: 'reviews', type: 'int'},
  67             {name: 'screen-size', type: 'int'}
  68         ]
  69     });
  70
  71     var store = Ext.create('Ext.data.ArrayStore', {
  72         model: 'Mobile',
  73         sortInfo: {
  74             field    : 'name',
  75             direction: 'ASC'
  76         },
  77         data: data
  78     });
  79
  80     var dataview = Ext.create('Ext.view.View', {
  81         deferInitialRefresh: false,
  82         store: store,
  83         tpl  : Ext.create('Ext.XTemplate',
  84             '<tpl for=".">',
  85                 '<div class="phone">',
  86                     (!Ext.isIE6? '<img width="64" height="64" src="images/phones/{[values.name.replace(/ /g, "-")]}.png" />' :
  87                      '<div style="width:74px;height:74px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/phones/{[values.name.replace(/ /g, "-")]}.png\',sizingMethod=\'scale\')"></div>'),
  88                     '<strong>{name}</strong>',
  89                     '<span>{price:usMoney} ({reviews} Review{[values.reviews == 1 ? "" : "s"]})</span>',
  90                 '</div>',
  91             '</tpl>'
  92         ),
  93
  94         plugins : [
  95             Ext.create('Ext.ux.DataView.Animated', {
  96                 duration  : 550,
  97                 idProperty: 'id'
  98             })
  99         ],
 100         id: 'phones',
 101
 102         itemSelector: 'div.phone',
 103         overItemCls : 'phone-hover',
 104         multiSelect : true,
 105         autoScroll  : true
 106     });
 107
 108     var phoneSlider = Ext.create('Ext.slider.Multi', {
 109         hideLabel: true,
 110         width    : 300,
 111         minValue : 0,
 112         maxValue : 500,
 113         values   : [80, 320],
 114
 115         listeners: {
 116             change: {
 117                 buffer: 70,
 118                 fn    : filterData
 119             }
 120         }
 121     });
 122
 123     Ext.create('Ext.panel.Panel', {
 124         title: 'Animated DataView',
 125         layout: 'fit',
 126         items : dataview,
 127         height: 555,
 128         width : 650,
 129         tbar  : [
 130             'Filter phone price:',
 131             ' ',
 132             phoneSlider
 133         ],
 134         renderTo: 'docbody'
 135     });
 136
 137     //filters the store based on the current slider values
 138     function filterData(slider) {
 139         var values  = slider.getValues();
 140
 141         var test = [];
 142
 143         //TODO: the suspend/resume hack can be removed once Filtering has been updated
 144         store.suspendEvents();
 145         store.clearFilter();
 146         store.resumeEvents();
 147         store.filter([{
 148             fn: function(record) {
 149                 return record.get('price') >= values[0] && record.get('price') <= values[1];
 150             }
 151         }]);
 152
 153         store.sort('name', 'ASC');
 154     }
 155
 156     //perform initial filter
 157     filterData(phoneSlider);
 158 });
 159