Panel.js
3.16 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
/**
* @class Ext.multisort.Panel
* @extends Ext.panel.Panel
* @author Ed Spencer
*
*
*/
Ext.define('Ext.multisort.Panel', {
extend: 'Ext.panel.Panel',
width: 800,
height: 450,
title: 'Multisort DataView',
autoScroll: true,
requires: ['Ext.toolbar.TextItem', 'Ext.view.View'],
initComponent: function() {
this.tbar = Ext.create('Ext.toolbar.Toolbar', {
plugins : Ext.create('Ext.ux.BoxReorderer', {
listeners: {
scope: this,
drop: this.updateStoreSorters
}
}),
defaults: {
listeners: {
scope: this,
changeDirection: this.updateStoreSorters
}
},
items: [{
xtype: 'tbtext',
text: 'Sort on these fields:',
reorderable: false
}, {
xtype: 'sortbutton',
text : 'Type',
dataIndex: 'type'
}, {
xtype: 'sortbutton',
text : 'Name',
dataIndex: 'name'
}]
});
this.items = {
xtype: 'dataview',
tpl: [
'<tpl for=".">',
'<div class="item">',
(!Ext.isIE6? '<img src="../../datasets/touch-icons/{thumb}" />' :
'<div style="position:relative;width:74px;height:74px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'../../datasets/touch-icons/{thumb}\')"></div>'),
'<h3>{name}</h3>',
'</div>',
'</tpl>'
],
plugins: [Ext.create('Ext.ux.DataView.Animated')],
itemSelector: 'div.item',
store: Ext.create('Ext.data.Store', {
autoLoad: true,
sortOnLoad: true,
storeId: 'test',
fields: ['name', 'thumb', 'url', 'type'],
proxy: {
type: 'ajax',
url : '../../datasets/sencha-touch-examples.json',
reader: {
type: 'json',
root: ''
}
}
})
};
this.callParent(arguments);
this.updateStoreSorters();
},
/**
* Returns the array of Ext.util.Sorters defined by the current toolbar button order
* @return {Array} The sorters
*/
getSorters: function() {
var buttons = this.query('toolbar sortbutton'),
sorters = [];
Ext.Array.each(buttons, function(button) {
sorters.push({
property : button.getDataIndex(),
direction: button.getDirection()
});
});
return sorters;
},
/**
* @private
* Updates the DataView's Store's sorters based on the current Toolbar button configuration
*/
updateStoreSorters: function() {
var sorters = this.getSorters(),
view = this.down('dataview');
view.store.sort(sorters);
}
});