examples/view/animated-dataview.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.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", 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     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} ({reviews} Review{[values.reviews == 1 ? "" : "s"]})</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 phoneSlider = new Ext.Slider({
  70         width   : 300,
  71         minValue: 0,
  72         maxValue: 500,
  73         values  : [80, 320],
  74         plugins : [
  75             new Ext.slider.Tip({
  76                 getText: function(thumb) {
  77                     var largest = Ext.max(store.collect('price', false, true));
  78
  79                     return String.format('<b>${0}</b>', thumb.value);
  80                 }
  81             })
  82         ],
  83
  84         listeners: {
  85             change: {
  86                 buffer: 70,
  87                 fn    : filterData
  88             }
  89         }
  90     });
  91
  92     new Ext.Panel({
  93         title: 'Animated DataView',
  94         layout: 'fit',
  95         items : dataview,
  96         height: 615,
  97         width : 800,
  98         tbar  : [
  99             'Filter phone price:', ' ',
 100             phoneSlider
 101         ],
 102         renderTo: 'docbody'
 103     });
 104
 105     //filters the store based on the current slider values
 106     function filterData(slider) {
 107         var values  = slider.getValues();
 108
 109         store.filter([{
 110             fn: function(record) {
 111                 return record.get('price') >= values[0] && record.get('price') <= values[1];
 112             }
 113         }]);
 114
 115         store.sort('name', 'ASC');
 116     };
 117
 118     //perform initial filter
 119     filterData(phoneSlider);
 120 });