forked from robertklep/buffered-ext-list-sencha-touch-2
-
Notifications
You must be signed in to change notification settings - Fork 1
/
test-grouped-pinheaders-list.html
60 lines (56 loc) · 1.5 KB
/
test-grouped-pinheaders-list.html
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css">
<script src="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>
<script src="data/albumdata.js"></script>
<script src="ux/BufferedList.js"></script>
<script>
Ext.setup({
onReady : function() {
// define a simple model
Ext.define('Albums', {
extend: 'Ext.data.Model',
fields: ['album']
});
// define a simple store
var store = new Ext.create('Ext.data.Store', {
config : {
model: 'Albums',
},
grouper : {
groupFn : function(record) {
return record.get('album').substring(0, 2).toUpperCase();
},
},
data: ListTestData
});
// showing in desktop os?
var isDesktop = Ext.os.is.MacOS | Ext.os.is.Windows | Ext.os.is.Linux;
// create a floating config for desktops
var baseConfig = isDesktop ? {
floating : true,
width : 500,
height : 500,
centered : true,
modal : true,
hideOnMaskTap : false
} : {
fullscreen : true
};
// initialize the main view
Ext.Viewport.add(Ext.apply({
xtype : 'bufferedlist',
grouped : true,
pinHeaders : true,
indexBar : false,
store : store,
itemTpl : '{album}'
}, baseConfig));
}
});
</script>
</head>
<body></body>
</html>