extjs: load mask grid - extjs

Question

I am using extjs grid, and I have a jQuery timer, which will call RenderGrid function every 20 seconds. I want to show mask for grid each timer tick. Please advise.
function RenderGrid(dataObj) {
var jasonContent = JSON.parse(dataObj)
if (document.getElementById('panel').innerHTML != '') {
document.getElementById('panel').innerHTML = '';
}
var myData = {
records: jasonContent
};
var fields = [
{ name: 'Position_ID', mapping: 'Position_ID' },
{ name: 'PriorityCount', mapping: 'PriorityCount' },
{ name: 'MyCheckBox', mapping: 'MyCheckBox' },
{ name: 'Veh_Plateno', mapping: 'Veh_Plateno' },
{ name: 'Drv_Firstname', mapping: 'Drv_Firstname' },
{ name: 'GPSTimeAsString', mapping: 'GPSTimeAsString' },
{ name: 'Speed', mapping: 'Speed' },
{ name: 'SubFleet_Name', mapping: 'SubFleet_Name' }
];
var gridStore = new Ext.data.JsonStore({
fields: fields,
data: myData,
root: 'records'
});
var cols = [
{ id: 'Position_ID', header: "Position_ID", width: 160, sortable: true, dataIndex: 'Position_ID', hidden: true, hideable: false },
{ header: "", width: 30, sortable: false, dataIndex: 'MyCheckBox', renderer: renderCheckBox, hideable: false, menuDisabled: true },
{ header: "", width: 30, sortable: false, dataIndex: 'PriorityCount', renderer: renderIcon, hideable: false, menuDisabled: true },
{ header: "Veh_Plateno", width: 100, sortable: true, dataIndex: 'Veh_Plateno' },
{ header: "Drv_Firstname", width: 100, sortable: true, dataIndex: 'Drv_Firstname' },
{ header: "GPSTime", width: 100, sortable: true, dataIndex: 'GPSTimeAsString' },
{ header: "Speed", width: 100, sortable: true, dataIndex: 'Speed' },
{ header: "SubFleet_Name", width: 100, sortable: true, dataIndex: 'SubFleet_Name' }
];
gridStore.setDefaultSort('Veh_Plateno', 'asc');
var grid = new Ext.grid.GridPanel({
ddGroup: 'gridDDGroup',
store: gridStore,
renderTo: 'panel',
columns: cols,
enableDragDrop: true,
stripeRows: true,
pageSize:25,
header: false,
loadMask: true,
autoExpandColumn: 'Position_ID',
width: 900,
height: 325,
region: 'west',
title: 'Data Grid',
selModel: new Ext.grid.RowSelectionModel({ singleSelect: false }),
listeners: {
'rowdblclick': function (grid, rowIndex, e) {
var rec = grid.getStore().getAt(rowIndex);
var columnName = grid.getColumnModel().getDataIndex(2);
Ext.MessageBox.alert('', rec.get(columnName));
// do something
}
}
});
//grid.getEl().mask();
//grid.store.reload();
//grid.getEl().unmask();
//gridStore.load({ params: { start:0, limit: 25} });
/// grid.loadMask.show();
grid = null;
cols = null;
fields = null;
gridStore = null;
myData = null;
}
thaks man this approch working fine with me but now my browser is hanging it seems, grid object will enter in infinite loop this all my script code, please prvide me example with timer if you can :
var grid = null;
function RenderPositionsGrid(dataObj) {
var jasonContent = JSON.parse(dataObj)
var myData = {
records: jasonContent
};
if (grid == null) {
var fields = [
{ name: 'Position_ID', mapping: 'Position_ID' },
{ name: 'PriorityCount', mapping: 'PriorityCount' },
{ name: 'MyCheckBox', mapping: 'MyCheckBox' },
{ name: 'Veh_Plateno', mapping: 'Veh_Plateno' },
{ name: 'Drv_Firstname', mapping: 'Drv_Firstname' },
{ name: 'GPSTimeAsString', mapping: 'GPSTimeAsString' },
{ name: 'Speed', mapping: 'Speed' },
{ name: 'SubFleet_Name', mapping: 'SubFleet_Name' }
];
var gridStore = new Ext.data.JsonStore({
fields: fields,
data: myData,
root: 'records'
});
var cols = [
{ id: 'Position_ID', header: "Position_ID", width: 160, sortable: true, dataIndex: 'Position_ID', hidden: true, hideable: false },
{ header: "", width: 30, sortable: false, dataIndex: 'MyCheckBox', renderer: renderCheckBox, hideable: false, menuDisabled: true },
{ header: "", width: 30, sortable: false, dataIndex: 'PriorityCount', renderer: renderIcon, hideable: false, menuDisabled: true },
{ header: "Veh_Plateno", width: 100, sortable: true, dataIndex: 'Veh_Plateno' },
{ header: "Drv_Firstname", width: 100, sortable: true, dataIndex: 'Drv_Firstname' },
{ header: "GPSTime", width: 100, sortable: true, dataIndex: 'GPSTimeAsString' },
{ header: "Speed", width: 100, sortable: true, dataIndex: 'Speed' },
{ header: "SubFleet_Name", width: 100, sortable: true, dataIndex: 'SubFleet_Name' }
];
gridStore.setDefaultSort('Veh_Plateno', 'asc');
grid = new Ext.grid.GridPanel({
ddGroup: 'gridDDGroup',
store: gridStore,
renderTo: 'panel',
columns: cols,
enableDragDrop: true,
stripeRows: true,
pageSize: 25,
header: false,
loadMask: true,
autoExpandColumn: 'Position_ID',
width: 900,
height: 325,
region: 'west',
title: 'Data Grid',
selModel: new Ext.grid.RowSelectionModel({ singleSelect: false }),
listeners: {
'rowdblclick': function (grid, rowIndex, e) {
var rec = grid.getStore().getAt(rowIndex);
var columnName = grid.getColumnModel().getDataIndex(2);
Ext.MessageBox.alert('', rec.get(columnName));
// do something
}
}
});
}
else {
grid.store.loadData(myData);
}
}
function renderIcon(val) {
if (val) {
val = '../images/grid/icon_warning.png';
return "<img class=Blink src='" + val + "'>";
}
}
function renderCheckBox(val, cell, record) {
var x = '<input onclick="alert(' + cell.id + ')" type="checkbox" name="mycheckbox" />';
//var x = '<input type="checkbox" name="mycheckbox" />';
return x;
}
function renderDate(date) {
alert(date);
return date.format("d.m.Y");
}
function BindGridView() {
Data.GetVehiclePositions(onSuccess, onFail, null);
}
function onSuccess(result) {
RenderPositionsGrid(result);
var timeout = 4000; var timer;
timer = $.timer(timeout, function () { BindGridView(result); });
}
function onFail(result) {
alert("fail");
}
function blink() {
$('.Blink').delay(100).fadeTo(200, 0.5).delay(200).fadeTo(100, 1, blink);
}
Ext.onReady(function () {
BindGridView();
blink();
});

Answer 1

You could use
var myMask = new Ext.LoadMask(grid.getEl(), {msg:"Please wait..."});
myMask.show();
But I find your approach kind of weird, seems like the only thing changing every 20 seconds is your dada, your store, column model, grid never changed.
Can you just do a simple loadData(Object data, [Boolean append] ) in your timer handler? the API is here