PDA

View Full Version : Auto Refresh



waqas iqbal
1 Apr 2013, 9:31 PM
hi all,
i am using Extjs and i am quiet impressed because of its flexible environment,
and also by thier active community members.
Now on main topic
"I want to ask is this possible to have button in toolbar by pressing that button ,grid start refreshing continously and by clicking pause button it get stops refreshing the grid"
Any help will be appreciated.

This is my code for grid:


var grid = Ext.create('Ext.ux.LiveSearchGridPanel', {
height: 400,
width: '99%',
title: "Admissions",
frame: true,
renderTo: 'my_admissions',
store: store,
loadMask: true,
columns: [
{header:'Status', renderer:renderStatus, dataIndex: 'hbc_status'},
{header : 'Tracking Number', dataIndex: 'tracking_number', renderer:renderTrackingID},
{header : 'First Name' , sortable : true,dataIndex: 'phi_first_name', renderer:renderTrackingID},
{header : 'Last Name' ,sortable : true,dataIndex: 'phi_last_name', renderer:renderTrackingID},
{header : 'Age',dataIndex: 'phi_date_of_birth'},
{header : 'Gender',dataIndex: 'phi_gender'},
{header : 'Symptoms', dataIndex: 'phi_symptoms'},
{header : 'Diagnoses',dataIndex: 'phi_diagnoses'},
{header : 'Condition', dataIndex: 'phi_condition'},
{header : 'Bed Type', dataIndex: 'phi_bed_type'},
{header : 'Clinic',dataIndex: 'clinic' },
{header : 'Hospital', dataIndex: 'hospital' },
{header : 'Updated', sortable : true, dataIndex: 'updated'}
],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text:'Export CSV',
iconCls:'add15',
menu:[
{
xtype:'form',
standardSubmit:true,
id: 'form',
bodyPadding: 5,
items: [{
xtype: 'datefield',
fieldLabel: 'From:',
name: 'start_date',
format: 'Y-m-d',
dataIndex:'start_date',
},{
xtype: 'datefield',
fieldLabel: 'To:',
name: 'end_date',
format: 'Y-m-d',
dataIndex:'end_date'
}],
buttons: [{
text: 'Confirm',
handler: function(){
var form = Ext.getCmp('form').getForm();
if (form.isValid()) {
form.submit({
target : '_self',
url: '../admissions/admissions_csv',
});
}
}
}]
}
]}
]
},

Farish
1 Apr 2013, 10:49 PM
I am not sure if you want to refresh grid's view or reload the store's data but in any case, the following JS functions will help you:


refreshTimer = setTimeout("refreshGrid()" , 1000); // reload after every 1 sec

clearTimeout(refreshTimer );


So on first button press, you use setTimeout to call a function "refreshGrid". Remember that setTimeout will only call the function once. In the refreshGrid function, you have to use the same statement at the end to make it recursively call itself.

When you want to stop refresh, call clearTimeout().

Edit: or you can use the setInterval() function in place of setTimeout() to call your function recursively

VDP
2 Apr 2013, 1:50 AM
Maybe the TaskRunner is even better fit for the job.

http://docs.sencha.com/ext-js/4-2/#!/api/Ext.util.TaskRunner
(http://docs.sencha.com/ext-js/4-2/#!/api/Ext.util.TaskRunner)


var runner = new Ext.util.TaskRunner();
var task = runner.newTask({
run: function () {
// useful code
},
interval: 1000
});


task.start();


// ...


task.stop();


// ...


task.start();


so a simple store.load() should suffice...

waqas iqbal
2 Apr 2013, 3:13 AM
Thanks for replying guys....
I applied both suggestions , but i think i have live search grid panel ,because of this i am not getting the required result ,kindly any one modify my code and tell me exactly how to achieve this.

scottmartin
2 Apr 2013, 12:33 PM
The TaskManager should do what you need:

// example


if (button.pressed) {
var combo = listForm.down('#interval-combo-id');

Ext.TaskManager.start({
run : function () {
store.load();
},
interval : 1000 * combo.value,
scope : store
});
} else {
Ext.TaskManager.stopAll();
}



because of this i am not getting the required result

Can you be more specific? What is not working?

waqas iqbal
2 Apr 2013, 10:37 PM
Thanks Scott,
yeah i can be more specific, actually now my page is continously refreshing without pressing any button because of this code


function timedCount()
{
t=setTimeout("timedCount()",2000);

var current = t;
if(!previous)
{

previous = t;
}
if(current != previous)
{
window.location = '../admissions/admissions';
}
}
and because of this, its in end of the page


function renderTrackingID(value, p, record)
{

return Ext.String.format(
'<a href="../admission/admission/{2}">{0}</a>',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}
if(!previous)
{
timedCount();
}

}



I want to handle this refreshing by clicking simply the button,and stop it by pressing pause button.
I hope now my question is quiet clear.

VDP
2 Apr 2013, 11:25 PM
I added a dummy store, simplified the grid (less columns) and have no backend but this should get you on your way.

http://jsfiddle.net/Vandeplas/uf383/

(http://jsfiddle.net/Vandeplas/uf383/)Just add:

var runner = new Ext.util.TaskRunner();

And add this to your toolbar:


{
xtype: 'button',
enableToggle: true,
iconCls: 'x-tbar-loading', //nice refresh icon
listeners: {
toggle: function (button, pressed) {
var grid = button.up('grid');
if (!Ext.isDefined(grid.refreshTask)) { //check if the task is already created
grid.refreshTask = runner.newTask({ //create task
run: function () {
console.log('refresh'); //just a log to show you its executing on an interval
grid.getStore().reload(); //Reloads the store using the last options passed to the load method.
},
interval: 1000
});
}
if (pressed) { //toggle between start and stop
grid.refreshTask.start();
} else {
grid.refreshTask.stop();
}
}
}

waqas iqbal
3 Apr 2013, 1:33 AM
Thanks.......VDP
it's amazingly working...
Cheers....

Thanks alot.

VDP
3 Apr 2013, 7:45 AM
glad to be of service ;) (You can mark it as answer if you like)

scottmartin
3 Apr 2013, 8:01 AM
You can mark it as answer if you like

Done ;)