PDA

View Full Version : How i can make dynamic data updates in Grids on a different PC's?



Savaog
11 Apr 2012, 2:27 AM
Hello everyone!

I have some trouble in my Grids with dynamic data sync between two or more PC's.
This Grid is working fine himself on one PC, but if i put some changing in rows (create, delete, edit) - its nothing shows on a same Grid on another PC.

Please help me to solve this problem.

Here is my scripts:

Store & Model:


Ext.define('SeasonModel', {
extend: 'Ext.data.Model',
fields: [ ]
});

var seasonstore = Ext.create('Ext.data.Store', {
autoLoad: false,
autoSync: true,
model: 'SeasonModel',
proxy: {
type: 'ajax',
url: 'config/db-season.php',
actionMethods: {
create : 'POST',
read : 'GET',
update : 'POST',
destroy: 'POST'
},
reader: {
type: 'json',
root: ''
},
writer: {
type: 'json',
root: ''
}
}
});


Grid & Plugins:


function showSeasonWin(){
var SeasonWin;

if(!SeasonWin){

//Ext.LoadMask.disabled = true;

Ext.onReady(function(){
// Ext.QuickTips.init();

Ext.grid.RowEditor.prototype.saveBtnText = 'Обновить';
Ext.grid.RowEditor.prototype.cancelBtnText = 'Отмена';

var RowEdit = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
autoCancel: false,
// listeners: {
// beforeedit: function() {
// Ext.TaskManager.stop(task_start);
// }
// }
});

RowEdit.on({
scope: this,
afteredit: function(add) {
//Ext.TaskManager.start(task_start);
Ext.Ajax.request({
url : 'config/db-season.php',
waitMsg: 'Пожалуйста подождите...',
method: 'POST',
params: {task_update: 'add',
f1: add.record.data.step_id,
f2: add.record.data.real_timedate,
f3: add.record.data.prep_timedate,
f4: add.record.data.season_name,
f5: add.record.data.season_date_from,
f6: add.record.data.season_date_till,
f7: add.record.data.season_default
},
success: function() {
seasonstore.load();

}
});
},
});


var seasonwindow = Ext.create('Ext.grid.Panel', {

layout: 'fit',
border: false,
//maskOnDisable : false,
//autoShow: true,
//autoRender: true,
//floating: true,
//collapsible: true,
//maximizable: true,
//forceFit: true,
//draggable: 'true',

columns: [{
header: '№ п.п.',
width: 45,
sortable: true,
dataIndex: 'step_id',
field: {
xtype: 'textfield',
disabled: true

}
},{
header: 'Наименование сезона',
width: 150,
sortable: true,
dataIndex: 'season_name',
field: {
xtype: 'textfield'
}
}, {
xtype: 'datecolumn',
header: 'Дата Начала',
width: 150,
sortable: true,
dataIndex: 'season_date_from',
format: 'd/m/Y',
minValue: '00/00/0000',
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'd/m/Y',
minValue: '00/00/0000',
}
}, {
xtype: 'datecolumn',
header: 'Дата окончания',
width: 150,
sortable: true,
dataIndex: 'season_date_till',
//xtype: 'datefield',
format: 'd/m/Y',
minValue: '00/00/0000',
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'd/m/Y',
minValue: '00/00/0000',
}
}, {
header: 'Текущий сезон',
width: 150,
sortable: true,
dataIndex: 'season_default',
field: {
xtype: 'textfield'
}
}],
dockedItems:[{
xtype: 'toolbar',
items: [{
itemId: 'create',
text: 'Добавить сезон',
iconCls: 'icon-add',
icon: 'images/icons/add.gif',
handler: function(){
Ext.Ajax.request({
url: 'config/db-season.php',
waitMsg: 'Пожалуйста подождите...',
method: 'POST',
params: {task_create: 'add'},
success: function(result) {
console.log(result);
seasonstore.load();
}
});
}}, '-', {
itemId: 'delete',
text: 'Удалить сезон',
iconCls: 'icon-delete',
icon: 'images/icons/delete.gif',
handler: function() {

var selection = seasonwindow.getView().getSelectionModel().getSelection()[0].data.step_id;

Ext.Ajax.request({
url: 'config/db-season.php',
waitMsg: 'Пожалуйста подождите...',
method: 'POST',
params: { task_delete: 'del',
idx: selection
//row2: Ext.data.Model.fieldName
},
success: function(result) {
console.log(result);
seasonstore.update();
}
});
var selection = seasonwindow.getView().getSelectionModel().getSelection()[0];
if (selection) {
//rowEdit.cancelEdit();
seasonstore.remove(selection);
}
}
}]
}],
plugins: [RowEdit],
store: seasonstore
// }

});


var winseason = Ext.create('Ext.window.Window', {
title: 'Раздел: Сезоны',
height: 250,
width: 800,
//x: '50%',
y: 100,
layout: 'fit',
collapsible: true,
constrain: true,
maximizable: true,
forceFit: true,
autoRender: true,
items: seasonwindow,
//maskOnDisable : false,
})
//.show();
seasonstore.load();
winseason.show();

});
}

SeasonWin.show();

}


Thanks for advise!
P.S. Sorry for poor english...

scottmartin
11 Apr 2012, 9:17 AM
Have a look at the following:
http://www.sencha.com/forum/showthread.php?122985-Grid-Auto-Refresh-possible

You must inform each PC to look for update.

Regards,
Scott.

Savaog
12 Apr 2012, 1:14 AM
Hello, Scott!

I use a EXT JS 4 version.

to refresh my store i use next method:


var task_start = {
run: function(){
//seasonstore.load();
this.seasonstore.load()
},
scope: this,
interval: 5000 //5 second
}
Ext.TaskManager.start(task_start);

and


Ext.TaskManager.stop(task_start);

to stop the task on any event.

But! Task has interval for 5 seconds and if i select (by mouse click) some row in my Grid in "refresh-time", selection is going to disappear. The same happens whith Editing/Deleting the row.
So refresher is preventing to make some actions to the row.
I undestand i can stop refresh the task while editing the row (Ext.TaskManager.stop(task_start);)
But if i need to delete the row and its already selected, i have only 5 seconds to make a decision till selection has "alive".

Thus, this method is not quite for my case.

So, i have several windows whith Grids, and i need to dynamicaly fill my Grids with data (on a fly).

This is possible?

Regards and
Thanks for advise!
Savaog

scottmartin
12 Apr 2012, 4:30 AM
I would change the interval to something more reasonable.. I am sure users do not actually need a 5 second update? A minute or 2 will usually suffice.. then reset the time on select. If they load the record from the grid, it will be the latest and then refresh the grid on save.

Regards,
Scott.

Savaog
12 Apr 2012, 11:57 PM
Hello, Scott!

Thanks alot for your suggestion!

If we realy haven't a "on the fly" method to dynamicaly reload the store, your answer is truly best!

Thanks alot, again, my friend!

Regards,
Savaog

extj4newbee
11 May 2012, 8:23 PM
Where should this code snippet to be placed?

var task_start = {
run: function(){
//seasonstore.load();
this.seasonstore.load()
},
scope: this,
interval: 5000 //5 second
}
Ext.TaskManager.start(task_start);