View Full Version : How to automate changing displayed grid row (from store) after X second delay

28 Aug 2013, 10:01 AM
I've got a small JSON datastore that presents a "now serving" ticket number. My store uses the TaskMgr to refresh every second and display the results. This works fine, but I now need to modify the output so that it changes the text to "PleaseWait" after a 5 second delay that starts when the ticket #changes from previous value until the actual data is updated when somebody gets a new ticket (the JSON store data changes).

(So if it displays now serving #10, then it will continue to show this for 5 seconds, then go to PleaseWait until the JSON Reader gets the next ticket, which will then display for 5 seconds, and so on.

Note there will only be one row to display in the grid, and two columns. (First column is now serving#, second column is an image of where to go)

var store = new Ext.data.JsonStore({ // This file is auto-updated by the host/OS
url: '/ticket/ticket_output.json',
method: 'GET',
timeout: 90000, // it will never actually timeout since this file changes externally
root: 'ticket',
fields: [{ name: 'queue',id: 'Idqueue',type: 'int'},
{ name: 'arrow',type:'string'}]

// Here is the problem .. .how do I use a renderer to change what is displayed until data changes?
function ticketViewer(???)

function getColumns(width) {
return [ {
header: "<center>Ticket</center>",
dataIndex: 'queue',
renderer: ticketViewer
},{ // the arrow data is the name of image file to
display showing desired window locatn
dataIndex: 'arrow', // This just shows left or right arrow based on ticket #
renderer: function(value){ return '<img src="' + value + '" />'; }
var peopleListGrid = new Ext.grid.GridPanel({
id: 'peoplelist-grid',
view: gridView,
store: store,
columns: getColumns(),
autoExpandColumn: 'Idqueue',
autoShow: true,
border: false,
editable: false,
floating: true,
shadow: false,
margins: '10 0 0 10',
loadMask: false,
hideSortIcons: true,
region: 'center'

var peopleListTask = {
run: peopleListGrid.getStore().load,
scope: peopleListGrid.getStore(),
interval: 1000 // auto refresh = 1 second
var videoServer = new Ext.Viewport({
layout: 'border',
items: [{
region: 'center',
id: 'videoserver-center',
enableDragDrop: false,
split: false,
headersDisabled: true,
editable: false,
resizeable: false,
hideSortIcons: true,
collapsible: false,
layout: 'border',
items: [peopleListGrid]

28 Aug 2013, 11:20 AM
Solved it ... I was just making this too complicated. The solution is to get create a lastTicket value when the ticket changes, along with calculating a timeout value 5 seconds into the future.

Then when I render it, check the time against timeout value, and either display the new ticket, or wait message based on the changes. No reason to use taskMgr to overcomplicate things.

Gary Schlosberg
30 Aug 2013, 8:40 AM
Glad to hear you found your solution, and thanks for sharing it with the community!