Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / view / animated-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", 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 });