examples/view/animated-dataview.js

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