]>
Commit | Line | Data |
---|---|---|
0bb29d35 DM |
1 | /* |
2 | * The DiffStore is a in-memory store acting as proxy between a real store | |
3 | * instance and a component. | |
4 | * Its purpose is to redisplay the component *only* if the data has been changed | |
5 | * inside the real store, to avoid the annoying visual flickering of using | |
6 | * the real store directly. | |
7 | * | |
8 | * Implementation: | |
9 | * The DiffStore monitors via mon() the 'load' events sent by the real store. | |
10 | * On each 'load' event, the DiffStore compares its own content with the target | |
11 | * store (call to cond_add_item()) and then fires a 'refresh' event. | |
12 | * The 'refresh' event will automatically trigger a view refresh on the component | |
13 | * who binds to this store. | |
14 | */ | |
15 | ||
16 | /* Config properties: | |
17 | * rstore: the realstore which will autorefresh its content from the API | |
18 | * Only works if rstore has a model and use 'idProperty' | |
19 | * sortAfterUpdate: sort the diffstore before rendering the view | |
20 | */ | |
21 | Ext.define('Proxmox.data.DiffStore', { | |
22 | extend: 'Ext.data.Store', | |
23 | alias: 'store.diff', | |
24 | ||
25 | sortAfterUpdate: false, | |
13fc756d | 26 | |
0bb29d35 DM |
27 | constructor: function(config) { |
28 | var me = this; | |
29 | ||
30 | config = config || {}; | |
31 | ||
32 | if (!config.rstore) { | |
33 | throw "no rstore specified"; | |
34 | } | |
35 | ||
36 | if (!config.rstore.model) { | |
37 | throw "no rstore model specified"; | |
38 | } | |
39 | ||
40 | var rstore = config.rstore; | |
41 | ||
42 | Ext.apply(config, { | |
43 | model: rstore.model, | |
44 | proxy: { type: 'memory' } | |
45 | }); | |
46 | ||
47 | me.callParent([config]); | |
48 | ||
49 | var first_load = true; | |
50 | ||
51 | var cond_add_item = function(data, id) { | |
52 | var olditem = me.getById(id); | |
53 | if (olditem) { | |
54 | olditem.beginEdit(); | |
55 | Ext.Array.each(me.model.prototype.fields, function(field) { | |
56 | if (olditem.data[field.name] !== data[field.name]) { | |
57 | olditem.set(field.name, data[field.name]); | |
58 | } | |
59 | }); | |
60 | olditem.endEdit(true); | |
13fc756d | 61 | olditem.commit(); |
0bb29d35 DM |
62 | } else { |
63 | var newrec = Ext.create(me.model, data); | |
64 | var pos = (me.appendAtStart && !first_load) ? 0 : me.data.length; | |
65 | me.insert(pos, newrec); | |
66 | } | |
67 | }; | |
68 | ||
69 | var loadFn = function(s, records, success) { | |
70 | ||
71 | if (!success) { | |
72 | return; | |
73 | } | |
74 | ||
75 | me.suspendEvents(); | |
76 | ||
77 | // getSource returns null if data is not filtered | |
78 | // if it is filtered it returns all records | |
79 | var allItems = me.getData().getSource() || me.getData(); | |
80 | ||
81 | // remove vanished items | |
82 | allItems.each(function(olditem) { | |
83 | var item = rstore.getById(olditem.getId()); | |
84 | if (!item) { | |
85 | me.remove(olditem); | |
86 | } | |
87 | }); | |
88 | ||
89 | rstore.each(function(item) { | |
90 | cond_add_item(item.data, item.getId()); | |
91 | }); | |
92 | ||
93 | me.filter(); | |
94 | ||
95 | if (me.sortAfterUpdate) { | |
96 | me.sort(); | |
97 | } | |
98 | ||
99 | first_load = false; | |
100 | ||
101 | me.resumeEvents(); | |
102 | me.fireEvent('refresh', me); | |
103 | me.fireEvent('datachanged', me); | |
104 | }; | |
105 | ||
106 | if (rstore.isLoaded()) { | |
107 | // if store is already loaded, | |
108 | // insert items instantly | |
109 | loadFn(rstore, [], true); | |
110 | } | |
111 | ||
112 | me.mon(rstore, 'load', loadFn); | |
113 | } | |
114 | }); |