How to refresh the store/model every few seconds? - extjs

Question

i have a grid panel (store and models are associated with it) where i am displaying all the data in row wise manner.The column of grid panel consist of action column where if person clicks, it opens a new form in tab style and user fills the data and it got saved in db. i want is, how the store should be refreshed every few second so that this data should also be displayed in the grid panel automatically. How should I do it?

Answer 1

There are a number of ways you could handle this, personally I would just reload the store when the form has closed to reload any updates rather than just reloading constantly.
The code below shows how you could use a TaskRunner in ExtJs to reload the store every x seconds, You could also add a setTimeout in the load event of the store so that every time the store loads you schedule it to load again in x seconds.
Ext.application({
name: 'Fiddle',
launch: function() {
var store = Ext.create('Ext.data.JsonStore', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'characters'
}
},
listeners: {
load: function() {
console.log(this);
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
var runner = new Ext.util.TaskRunner(),
task = runner.start({
run: function() {
store.reload();
},
interval: 3000
});
// IMPORTANT: Dont forget to call stop at a logical point.
runner.stop();
}
});
There is also a fiddle containing this code that you can play around with.
If I had to go with the SetTimeout or TaskRunner options for this I would likely initialize them in the render event of the parent panel/container and listen for the beforeDestroy event to stop them running.