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