I am using two Gridx on a TabContainer, on Grid show the master table data, and another Grid show slave table data. My logic is, when the master grid loaded, default select first row, and also load slave data for the slave grid. At the first time we show the Grid, it is normal.But if i close the tab and open it again, then call Gridx.body.refresh(), we get error.
When I trace the log, found when call _showLoadingMask on the Body module, it get loadingNode and emptyNode undefined. I'm not sure why the first time it is normal but not the second time when I reopen the tab.
My code as below:
var masterGrid = null;
var slaveGrid = null;
function loadMaster() {
masterGrid = new Gridx({......});
masterGrid.startup();
masterGrid.model.when(null, function() {
var row = masterGrid.row(0);
if(row) { row.select(); }
});
masterGrid.select.row.onSelected = function(row) {
loadSlave(row.id);
}
}
function loadSlave(masterId) {
if(!slaveGrid) {
loadSlaveGrid(masterId);
} else {
refreshSlaveGrid(masterId);
}
}
function loadSlaveGrid(masterId) {
.........
}
function refreshSlaveGrid(masterId) {
var store = slaveGrid.store;
stroe.target = slaveCallUrl + "/" + masterId;
slaveGrid.model.clearCache(); //
slaveGrid.setStore(store); //
slaveGrid.body.refresh(); //
}
My code as below: var masterGrid = null; var slaveGrid = null; function loadMaster() { masterGrid = new Gridx({......}); masterGrid.startup(); masterGrid.model.when(null, function() { var row = masterGrid.row(0); if(row) { row.select(); } }); masterGrid.select.row.onSelected = function(row) { loadSlave(row.id); } } function loadSlave(masterId) { if(!slaveGrid) { loadSlaveGrid(masterId); } else { refreshSlaveGrid(masterId); } } function loadSlaveGrid(masterId) { ......... } function refreshSlaveGrid(masterId) { var store = slaveGrid.store; stroe.target = slaveCallUrl + "/" + masterId; slaveGrid.model.clearCache(); // slaveGrid.setStore(store); // slaveGrid.body.refresh(); // }