PDA

View Full Version : Updates to grid store result in UI delay



jnorman67
11 Sep 2013, 3:22 PM
I have a grid with around 100 records in it. I have a timed task that updates one of the fields in the grid's store every few seconds. If the number of changes is significant, there is a noticeable (2-3 second) pause in the UI. I am assuming that the delay is caused by events that are being fired and handled to keep the grid in sync with the store.

Is there a way to update the records such that the grid operates smoothly?

I don't think I'm doing anything unusual with the grid, but I can probably create an example if necessary.

ettavolt
11 Sep 2013, 10:22 PM
More likely you are using some kind of summary, that forces whole refresh. This was an issue with 4.1, but then it said to be foxed - don't know in which version.
Usually, if one field is change only corresponding cell is updated.

jnorman67
12 Sep 2013, 10:56 AM
Run this jsFiddle. Grab the scroll bar's handle and move it up and down continuously. When an update to the store occurs, scrolling will halt for a moment. This is the type of behavior I wish to avoid -- UI pauses during grid refresh.

http://jsfiddle.net/wTNzd/2/
(http://jsfiddle.net/wTNzd/1/)
In my application, I don't specifically need to update the store. A TaskManager task updates the status of each row. I would like to simply assign a set of classes to each row based on the status, and let CSS handle the visual indication. However, I have found no other way to apply CSS classes than implementing ViewConfig.getRowClass, which takes a record from the store as its input.

I am using version 4.2.

evant
12 Sep 2013, 6:04 PM
Ext.onReady(function() {

var names = ["Marian Pothier", "Alonso Balding", "Shalanda Dowless", "Anglea Lomax", "Mellissa Delia", "Rachelle Alewine", "Ronni Mcgarvey", "Kandra Amaya", "Meda Pumphrey", "Launa Lard", "Samella Weishaar ", "Broderick Godbout", "Moshe Ramon", "Cordie Lyon", "Delia Moody", "Rickey Salvaggio", "Isadora Schrimsher", "Margy Klenk", "Liza Chait", "Berneice Daulton", "Bart Parmer", "Marg Bunner", "Hien Mannella", "Tristan Eisenhower", "Sindy Zerr", "Laurie Redeker", "Vesta Breed", "Shannan Tennant", "Jaye Hermosillo", "Hermelinda Cordeiro", "Lynna Mickley", "Maryjane Luiz", "Aleen Leachman", "Shante Vila", "Gabriella Ried", "Latricia Hanzlik", "Marx Rawlings", "Linnie Lafferty", "Katheleen Heckel", "Frank Schuett", "Delisa Everitt", "Brent Dansby", "Dominga Turnbough", "Williams Walley", "Ethan Mojarro", "Darell Jim", "Shelley Wain", "Hope Fielding", "Debrah Born", "Lavonna Flagler ", "Stacey Nath", "Reva Simms", "Alex Harden", "Stefani Carver", "Noma Kalinowski", "Pearlene Difranco", "Mayme Iglesias", "Kevin Hope", "Elroy Dunson", "Rachal Vert", "Genevive Kemble", "Casey Lou", "Kellye Badalamenti", "Alphonso Petty", "Carisa Sheriff", "Alberto Kulpa", "Yer Croston", "Dianna Sugg", "Shana Stroble", "Beatrice Egger", "Leonia Oswalt", "Mendy High", "Wilbert Madera", "Xenia Word", "Belkis Holaday", "Shirly Saeger", "Evie Innocent", "Carylon Guyette", "Stanton Conlan", "Leta Hippe", "Juliann Liriano", "Ta Elzy", "Donny Marie", "Willie Molnar", "Antonia Boutte", "Buck Corson", "Ina Flock", "Laurel Fenstermacher", "Waylon Durr", "Heidy Rochelle", "Dorinda Castellanos", "Tiffanie Gilmore", "Enriqueta Tygart", "Rachelle Domino", "Rodrigo Noone", "Deane Redner", "Dorathy Corkery", "Zandra Morais", "Merrie Lampron", "Adah Devlin"];

var items = [];
Ext.each(names, function(name) {
items.push({
name: name,
score: Ext.Number.randomInt(0, 100)
});
});

Ext.create('Ext.data.Store', {
storeId: 'scoreStore',
fields: ['name', 'score'],
data: {
'items': items
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
store: Ext.data.StoreManager.lookup('scoreStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Score',
dataIndex: 'score',
flex: 1
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

var task = {
run: function() {
console.log("Running task");
var store = Ext.data.StoreManager.lookup('scoreStore');
store.suspendEvents();
store.each(function(rec) {
rec.set("score", rec.get("score") + 1);
});
store.resumeEvents();
grid.getView().refresh();
},
interval: 5000 //1 second
}

Ext.TaskManager.start(task);

});

ettavolt
12 Sep 2013, 9:37 PM
And after store.resumeEvents(); fire store.fireEvent('refresh') or view won't update.

evant
12 Sep 2013, 10:05 PM
No, that's why the call to refresh() is there. You should pretty much never fire an event on a component from outside the component.

jnorman67
13 Sep 2013, 7:52 AM
Refreshing returns the scroll position to the top, which is somewhat worse for my use case than stammered scrolling. Is there no way to affect the class of a particular row without messing with the store?

ettavolt
15 Sep 2013, 10:43 PM
Try this (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.view.AbstractView-cfg-preserveScrollOnRefresh) setting.

jnorman67
16 Sep 2013, 7:11 AM
Unless I'm mistaken, the setting won't work because the preserveScrollOnRefresh is defined in Ext.view.AbstractView, which is not in Ext.grid.Panel's class hierarchy.

evant
16 Sep 2013, 1:45 PM
Ext.panel.Table uses an Ext.panel.View as it's only child item, which extends Ext.view.AbstractView.

You can pass it in as part of the viewConfig: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Table-cfg-viewConfig