sz_146
24 Feb 2009, 5:16 AM
I am trying to migrate from ext to ext-GWT. I wrote a custom RPC Tree Loader in ext which overrides the requestData method of the ext tree loader. Now I don't know how best to migrate it to ext-GWT. Need advise and pointers to the right direction. e.g. which classes I shall use/override etc.
My existing ext tree loader :
RpcTreeLoader = function(config) {
RpcTreeLoader.superclass.constructor.call(this, config);
};
Ext.extend(RpcTreeLoader, Ext.tree.TreeLoader, {
//***********************************************************************
//*
//* requestData function
//* extends Ext.TreeLoader to request data through the JsonRpc call
//* and elaborate/process receieved data
//*
//***********************************************************************
requestData: function(node, callback) {
var callParams;
var rpc;
var rpcMethod = null;
var rpcParams = [];
if (this.fireEvent("beforeload", this, node, callback) !== false) {
callParams = this.getParams(node);
var tNodes = [];
if (this.requestMethod == 'GetQuestionLibraries') { // Question Library
//*******************************************************
//*
//* Question Library TreeLoader
//*
//********************************************************
if (node.isRoot) {
var tObjId = this.url || this.dataUrl;
var tObj = ds.getObj(tObjId);
if (tObj.hasLibraries()) {
var libraryIds = tObj.getLibraryIDs();
var libraryObjs = ds.getObjsByIds(libraryIds, function(libObjs) {
var tNodes = [];
node.attributes.children = [];
for (var i = 0; i < libObjs.length; i++) {
node.attributes.children.push(this.constructNode(libObjs[i]));
} // eo for
node.beginUpdate();
for (var j = 0; j < node.attributes.children.length; j++) {
node.appendChild(this.createNode(node.attributes.children[j]));
}
node.endUpdate();
if (typeof callback == "function") {
callback(node);
} // eo if
}, this); // eo questionObjs def (ds.getObjsByIds call)
} else { // No data returned
node.attributes.children = [{ id: '-1', text: 'There are currently no question libraries', icon: GlobalConstants.imagesFolder + 's.gif', cls: 'redtxt', leaf: true}];
node.beginUpdate();
node.appendChild(this.createNode(node.attributes.children[0]));
node.endUpdate();
if (typeof callback == "function") {
callback(node);
} // eo if
} // eo if(tObj ...)
} else { //node is not root
var childrenIDs = ds.getChildrenIds(callParams);
var chObjs = ds.getObjsByIds(childrenIDs, function(objs) {
node = this.addQuestionNodes(node, objs);
node.beginUpdate();
for (var j = 0; j < node.attributes.children.length; j++) {
node.appendChild(this.createNode(node.attributes.children[j]));
}
node.endUpdate();
if (typeof callback == "function") {
callback(node);
} // eo if
}, this); // eo ds.getObjByIds
} // eo if
} // eo if
//*******************************************************
//*
//* Question Set TreeLoader
//*
//********************************************************
if (this.requestMethod == 'GetQuestionSet') {
var tObjId = this.url || this.dataUrl;
var tObj = ds.getObj(tObjId);
if (tObj.hasQuestions()) {
var questionIds = tObj.getQuestionIDs();
for (var i = 0; i < questionIds.length; i++) {
// Add listener to each question object
ds.addListener(questionIds[i], ds.objUpdateListener, this); // eo listener
} // eo for
var questionObjs = ds.getObjsByIds(questionIds, function(qObjs) {
node = this.addQuestionNodes(node, qObjs);
node.beginUpdate();
for (var j = 0; j < node.attributes.children.length; j++) {
node.appendChild(this.createNode(node.attributes.children[j]));
}
node.endUpdate();
if (typeof callback == "function") {
callback(node);
} // eo if
}, this); // eo questionObjs def (ds.getObjsByIds call)
} else { // there are no questions
node.attributes.children = [{ id: '-1', text: 'There are currently no questions', icon: GlobalConstants.imagesFolder + 's.gif', cls: 'redtxt', leaf: true}];
node.beginUpdate();
node.appendChild(this.createNode(node.attributes.children[0]));
node.endUpdate();
if (typeof callback == "function") {
callback(node);
} // eo if
} // eo if tObj.hasQuestions
} // eo if
//*******************************************************
//*
//* NavTree TreeLoader
//*
//********************************************************
if (this.requestMethod == 'GetTopLevelOrgEntities') { // NavTree loader
if (node.isRoot) {
rpcMethod = this.requestMethod;
rpc = new JsonRpc({
url: GlobalConstants.serverUrl
}); // eo call
rpc.call({
method: rpcMethod,
parameters: rpcParams,
callback: function(success, data, response) {
if (success && data instanceof Object) {
ds.store(data.Objs);
var tNodes = [];
node.attributes.children = [];
for (var i = 0; i < data.Answer.length; i++) {
var thisObj = ds.getObj(data.Answer[i]);
//***********************************************************************
//*
//* Add listener to newly added obj (NOTE: Uses obj id) *****
//*
//***********************************************************************
ds.addListener(data.Answer[i], ds.objUpdateListener, this); // eo listener
//********************* END OF LISTENERS *************************************
node.attributes.children.push(this.constructNode(thisObj));
} // eo for
node.beginUpdate();
for (var j = 0; j < node.attributes.children.length; j++) {
node.appendChild(this.createNode(node.attributes.children[j]));
}
node.endUpdate();
if (typeof callback == "function") {
callback(node);
} // eo if
} else {
Ext.Msg.alert('Sorry !!!', 'No data returned from server. Please try again later');
} // eo if
}, // eo callback function
scope: this
}); // eo rpc call
} else { // if node is not root
var childrenIDs = ds.getChildrenIds(callParams);
ds.getObjsByIds(childrenIDs, function(objs) {
var tNodes = [];
node.attributes.children = [];
for (var i = 0; i < objs.length; i++) {
//***********************************************************************
//*
//* Add listener to newly added obj (NOTE: Uses obj id) *****
//*
//***********************************************************************
ds.addListener(objs[i].getID(), ds.objUpdateListener, this); // eo listener
//********************* END OF LISTENERS *************************************
node.attributes.children.push(this.constructNode(objs[i]));
} // eo for
node.beginUpdate();
for (var j = 0; j < node.attributes.children.length; j++) {
node.appendChild(this.createNode(node.attributes.children[j]));
}
node.endUpdate();
if (typeof callback == "function") {
callback(node);
} // eo if
}, this); // eo ds.getObjByIds
} //eo if
} // eo if
} else {
if (typeof callback == "function") {
callback();
}
} // eo if (this.fireEvent("beforeload" ....)
}, // eo function requestData
/**
* Override this to add custom request parameters. Default adds the node id as first and only parameter
*/
getParams: function(node) {
return [node.id];
},
addQuestionNodes: function(node, objs) {
var tNodes = [];
node.attributes.children = [];
for (var i = 0; i < objs.length; i++) {
var thisObj = objs[i];
var cssclass = 'toplevelnodes';
if (ds.getObj(NavTree.selectedNode.id).isInheritedQuestion(thisObj.getID())) {
cssclass = 'inherited'
}
tNodes[i] = {
id: thisObj.getID(),
text: thisObj.getQuestionPrompt(),
icon: thisObj.getIcon(),
singleClickExpand: true,
cls: cssclass,
leaf: !thisObj.hasAnswers(),
allowDrop: false
};
if (thisObj.hasAnswers()) {
tNodes[i].children = [];
var answers = thisObj.getAnswers();
var ansDiv = '<span class="answer">';
Ext.each(answers, function(ans, index, allAns) {
ansDiv += '<img src="images/icon_answer.png"> ' + ans + '<br />';
}); // eo Ext.each
ansDiv += '</span>';
var ansNode = {
id: 'ansNode',
text: ansDiv,
leaf: true,
cls: 'test',
icon: GlobalConstants.imagesFolder + 's.gif'
}
tNodes[i].children.push(ansNode);
} // eo if
node.attributes.children.push(tNodes[i]);
} // eo for
return node;
},
constructNode: function(thisObj) {
var tNode = null;
if (thisObj != null && thisObj.getID) {
tNode = {
id: thisObj.getID(),
text: thisObj.getName(),
icon: thisObj.getIcon(),
singleClickExpand: true,
cls: 'toplevelnodes',
leaf: !thisObj.hasChildren()
};
} // eo if
return tNode;
},
//*******************************************************************
//*
//* updateNode function
//* must be called each time a node's attributes or children change
//*
//********************************************************************
updateNode: function(oId) {
ds.getObj(oId).updateBody();
ActionButtonHelper.activate(ds.getObj(oId));
var nObj = ds.getObj(oId);
var tree = NavTree.tree;
var node = tree.getNodeById(oId);
// Re-build node config from DS object
var nodeConfig = {
id: oId,
text: nObj.getName(),
icon: nObj.getIcon(),
cls: 'toplevelnodes'
};
//get children IDs for the node from datastore
var childrenIDs = nObj.getChildrenIDs();
var newNodes = [];
if (childrenIDs != null && childrenIDs.length > 0) {
nodeConfig.singleClickExpand = true;
nodeConfig.allowChildren = true;
nodeConfig.children = [];
nodeConfig.leaf = false;
node.expanded = true;
//node = NavTree.tree.getLoader().createNode(nodeConfig);
node.refresh(nodeConfig);
// Get objects for children IDs and re-add to node
var chObjs = ds.getObjsByIds(
childrenIDs,
function(objs) {
if (objs != null && objs.length > 0) {
Ext.each(objs, function(obj, index, allObjs) {
//*********** Add listener to newly added obj (NOTE: Uses just the id of obj) ************
ds.addListener(obj.getID(), ds.objUpdateListener, this); // eo listener
//********************* END OF LISTENER ******************************************
var cNode = {
id: obj.getID(),
text: obj.getName(),
icon: obj.getIcon(),
singleClickExpand: true,
cls: 'toplevelnodes',
leaf: !obj.hasChildren()
}
newNodes[index] = NavTree.tree.getLoader().createNode(cNode);
}); // eo Ext.each
node.beginUpdate();
node.expand();
// remove existing child nodes
while (node.hasChildNodes()) {
node.removeChild(node.item(0));
}
// add updated child nodes
node.appendChild(newNodes);
node.endUpdate();
} // eo if
tree.expandPath(node.getPath(), 'id', function(bSuccess, oLastNode) { // expand parent node
if (bSuccess && tree.getNodeById(node.id)) {
tree.getNodeById(node.id).ensureVisible(); // scroll to node
tree.getNodeById(node.id).select(); // select node
} // eo if
}); // oe tree expandPath
}, // eo function
this
); // eo chObjs
} else {
nodeConfig.leaf = true;
//nodeConfig = NavTree.tree.getLoader().createNode(nodeConfig);
node.refresh(nodeConfig);
} // eo if
}, // eo updateNode
//****************************************************************************
//*
//* updateQuestionNode function
//* must be called each time a question node's attributes or children change
//*
//****************************************************************************
updateQuestionNode: function(oId) {
var nObj = ds.getObj(oId);
var tree = QuestionTree.tree;
var node = tree.getNodeById(oId);
// Re-build node config from DS object
var nodeConfig = {
id: oId,
text: nObj.getQuestionPrompt(),
icon: nObj.getIcon(),
cls: 'toplevelnodes'
};
if (nObj.hasAnswers()) {
nodeConfig.singleClickExpand = true;
nodeConfig.allowChildren = true;
nodeConfig.children = [];
nodeConfig.leaf = false;
nodeConfig.expanded = true;
node.refresh(nodeConfig);
var answers = nObj.getAnswers();
var ansDiv = '<span class="answer">';
Ext.each(answers, function(ans, index, allAns) {
ansDiv += '<img src="images/icon_answer.png"> ' + ans + '<br />';
}); // eo Ext.each
ansDiv += '</span>';
var ansNode = {
id: 'ansNode',
text: ansDiv,
leaf: true,
cls: 'test',
icon: GlobalConstants.imagesFolder + 's.gif'
}
var newNode = QuestionTree.tree.getLoader().createNode(ansNode);
node.beginUpdate();
node.expand();
// remove existing child nodes
while (node.hasChildNodes()) {
node.removeChild(node.item(0));
}
// add updated child nodes
node.appendChild(newNode);
node.endUpdate();
tree.expandPath(node.getPath(), 'id', function(bSuccess, oLastNode) { // expand parent node
if (bSuccess && tree.getNodeById(node.id)) {
tree.getNodeById(node.id).ensureVisible(); // scroll to node
tree.getNodeById(node.id).select(); // select node
} // eo if
}); // oe tree expandPath
} else {
nodeConfig.leaf = true;
node.refresh(nodeConfig);
} // eo if
} // eo updateQuestionNode
});
//EOF
My existing ext tree loader :
RpcTreeLoader = function(config) {
RpcTreeLoader.superclass.constructor.call(this, config);
};
Ext.extend(RpcTreeLoader, Ext.tree.TreeLoader, {
//***********************************************************************
//*
//* requestData function
//* extends Ext.TreeLoader to request data through the JsonRpc call
//* and elaborate/process receieved data
//*
//***********************************************************************
requestData: function(node, callback) {
var callParams;
var rpc;
var rpcMethod = null;
var rpcParams = [];
if (this.fireEvent("beforeload", this, node, callback) !== false) {
callParams = this.getParams(node);
var tNodes = [];
if (this.requestMethod == 'GetQuestionLibraries') { // Question Library
//*******************************************************
//*
//* Question Library TreeLoader
//*
//********************************************************
if (node.isRoot) {
var tObjId = this.url || this.dataUrl;
var tObj = ds.getObj(tObjId);
if (tObj.hasLibraries()) {
var libraryIds = tObj.getLibraryIDs();
var libraryObjs = ds.getObjsByIds(libraryIds, function(libObjs) {
var tNodes = [];
node.attributes.children = [];
for (var i = 0; i < libObjs.length; i++) {
node.attributes.children.push(this.constructNode(libObjs[i]));
} // eo for
node.beginUpdate();
for (var j = 0; j < node.attributes.children.length; j++) {
node.appendChild(this.createNode(node.attributes.children[j]));
}
node.endUpdate();
if (typeof callback == "function") {
callback(node);
} // eo if
}, this); // eo questionObjs def (ds.getObjsByIds call)
} else { // No data returned
node.attributes.children = [{ id: '-1', text: 'There are currently no question libraries', icon: GlobalConstants.imagesFolder + 's.gif', cls: 'redtxt', leaf: true}];
node.beginUpdate();
node.appendChild(this.createNode(node.attributes.children[0]));
node.endUpdate();
if (typeof callback == "function") {
callback(node);
} // eo if
} // eo if(tObj ...)
} else { //node is not root
var childrenIDs = ds.getChildrenIds(callParams);
var chObjs = ds.getObjsByIds(childrenIDs, function(objs) {
node = this.addQuestionNodes(node, objs);
node.beginUpdate();
for (var j = 0; j < node.attributes.children.length; j++) {
node.appendChild(this.createNode(node.attributes.children[j]));
}
node.endUpdate();
if (typeof callback == "function") {
callback(node);
} // eo if
}, this); // eo ds.getObjByIds
} // eo if
} // eo if
//*******************************************************
//*
//* Question Set TreeLoader
//*
//********************************************************
if (this.requestMethod == 'GetQuestionSet') {
var tObjId = this.url || this.dataUrl;
var tObj = ds.getObj(tObjId);
if (tObj.hasQuestions()) {
var questionIds = tObj.getQuestionIDs();
for (var i = 0; i < questionIds.length; i++) {
// Add listener to each question object
ds.addListener(questionIds[i], ds.objUpdateListener, this); // eo listener
} // eo for
var questionObjs = ds.getObjsByIds(questionIds, function(qObjs) {
node = this.addQuestionNodes(node, qObjs);
node.beginUpdate();
for (var j = 0; j < node.attributes.children.length; j++) {
node.appendChild(this.createNode(node.attributes.children[j]));
}
node.endUpdate();
if (typeof callback == "function") {
callback(node);
} // eo if
}, this); // eo questionObjs def (ds.getObjsByIds call)
} else { // there are no questions
node.attributes.children = [{ id: '-1', text: 'There are currently no questions', icon: GlobalConstants.imagesFolder + 's.gif', cls: 'redtxt', leaf: true}];
node.beginUpdate();
node.appendChild(this.createNode(node.attributes.children[0]));
node.endUpdate();
if (typeof callback == "function") {
callback(node);
} // eo if
} // eo if tObj.hasQuestions
} // eo if
//*******************************************************
//*
//* NavTree TreeLoader
//*
//********************************************************
if (this.requestMethod == 'GetTopLevelOrgEntities') { // NavTree loader
if (node.isRoot) {
rpcMethod = this.requestMethod;
rpc = new JsonRpc({
url: GlobalConstants.serverUrl
}); // eo call
rpc.call({
method: rpcMethod,
parameters: rpcParams,
callback: function(success, data, response) {
if (success && data instanceof Object) {
ds.store(data.Objs);
var tNodes = [];
node.attributes.children = [];
for (var i = 0; i < data.Answer.length; i++) {
var thisObj = ds.getObj(data.Answer[i]);
//***********************************************************************
//*
//* Add listener to newly added obj (NOTE: Uses obj id) *****
//*
//***********************************************************************
ds.addListener(data.Answer[i], ds.objUpdateListener, this); // eo listener
//********************* END OF LISTENERS *************************************
node.attributes.children.push(this.constructNode(thisObj));
} // eo for
node.beginUpdate();
for (var j = 0; j < node.attributes.children.length; j++) {
node.appendChild(this.createNode(node.attributes.children[j]));
}
node.endUpdate();
if (typeof callback == "function") {
callback(node);
} // eo if
} else {
Ext.Msg.alert('Sorry !!!', 'No data returned from server. Please try again later');
} // eo if
}, // eo callback function
scope: this
}); // eo rpc call
} else { // if node is not root
var childrenIDs = ds.getChildrenIds(callParams);
ds.getObjsByIds(childrenIDs, function(objs) {
var tNodes = [];
node.attributes.children = [];
for (var i = 0; i < objs.length; i++) {
//***********************************************************************
//*
//* Add listener to newly added obj (NOTE: Uses obj id) *****
//*
//***********************************************************************
ds.addListener(objs[i].getID(), ds.objUpdateListener, this); // eo listener
//********************* END OF LISTENERS *************************************
node.attributes.children.push(this.constructNode(objs[i]));
} // eo for
node.beginUpdate();
for (var j = 0; j < node.attributes.children.length; j++) {
node.appendChild(this.createNode(node.attributes.children[j]));
}
node.endUpdate();
if (typeof callback == "function") {
callback(node);
} // eo if
}, this); // eo ds.getObjByIds
} //eo if
} // eo if
} else {
if (typeof callback == "function") {
callback();
}
} // eo if (this.fireEvent("beforeload" ....)
}, // eo function requestData
/**
* Override this to add custom request parameters. Default adds the node id as first and only parameter
*/
getParams: function(node) {
return [node.id];
},
addQuestionNodes: function(node, objs) {
var tNodes = [];
node.attributes.children = [];
for (var i = 0; i < objs.length; i++) {
var thisObj = objs[i];
var cssclass = 'toplevelnodes';
if (ds.getObj(NavTree.selectedNode.id).isInheritedQuestion(thisObj.getID())) {
cssclass = 'inherited'
}
tNodes[i] = {
id: thisObj.getID(),
text: thisObj.getQuestionPrompt(),
icon: thisObj.getIcon(),
singleClickExpand: true,
cls: cssclass,
leaf: !thisObj.hasAnswers(),
allowDrop: false
};
if (thisObj.hasAnswers()) {
tNodes[i].children = [];
var answers = thisObj.getAnswers();
var ansDiv = '<span class="answer">';
Ext.each(answers, function(ans, index, allAns) {
ansDiv += '<img src="images/icon_answer.png"> ' + ans + '<br />';
}); // eo Ext.each
ansDiv += '</span>';
var ansNode = {
id: 'ansNode',
text: ansDiv,
leaf: true,
cls: 'test',
icon: GlobalConstants.imagesFolder + 's.gif'
}
tNodes[i].children.push(ansNode);
} // eo if
node.attributes.children.push(tNodes[i]);
} // eo for
return node;
},
constructNode: function(thisObj) {
var tNode = null;
if (thisObj != null && thisObj.getID) {
tNode = {
id: thisObj.getID(),
text: thisObj.getName(),
icon: thisObj.getIcon(),
singleClickExpand: true,
cls: 'toplevelnodes',
leaf: !thisObj.hasChildren()
};
} // eo if
return tNode;
},
//*******************************************************************
//*
//* updateNode function
//* must be called each time a node's attributes or children change
//*
//********************************************************************
updateNode: function(oId) {
ds.getObj(oId).updateBody();
ActionButtonHelper.activate(ds.getObj(oId));
var nObj = ds.getObj(oId);
var tree = NavTree.tree;
var node = tree.getNodeById(oId);
// Re-build node config from DS object
var nodeConfig = {
id: oId,
text: nObj.getName(),
icon: nObj.getIcon(),
cls: 'toplevelnodes'
};
//get children IDs for the node from datastore
var childrenIDs = nObj.getChildrenIDs();
var newNodes = [];
if (childrenIDs != null && childrenIDs.length > 0) {
nodeConfig.singleClickExpand = true;
nodeConfig.allowChildren = true;
nodeConfig.children = [];
nodeConfig.leaf = false;
node.expanded = true;
//node = NavTree.tree.getLoader().createNode(nodeConfig);
node.refresh(nodeConfig);
// Get objects for children IDs and re-add to node
var chObjs = ds.getObjsByIds(
childrenIDs,
function(objs) {
if (objs != null && objs.length > 0) {
Ext.each(objs, function(obj, index, allObjs) {
//*********** Add listener to newly added obj (NOTE: Uses just the id of obj) ************
ds.addListener(obj.getID(), ds.objUpdateListener, this); // eo listener
//********************* END OF LISTENER ******************************************
var cNode = {
id: obj.getID(),
text: obj.getName(),
icon: obj.getIcon(),
singleClickExpand: true,
cls: 'toplevelnodes',
leaf: !obj.hasChildren()
}
newNodes[index] = NavTree.tree.getLoader().createNode(cNode);
}); // eo Ext.each
node.beginUpdate();
node.expand();
// remove existing child nodes
while (node.hasChildNodes()) {
node.removeChild(node.item(0));
}
// add updated child nodes
node.appendChild(newNodes);
node.endUpdate();
} // eo if
tree.expandPath(node.getPath(), 'id', function(bSuccess, oLastNode) { // expand parent node
if (bSuccess && tree.getNodeById(node.id)) {
tree.getNodeById(node.id).ensureVisible(); // scroll to node
tree.getNodeById(node.id).select(); // select node
} // eo if
}); // oe tree expandPath
}, // eo function
this
); // eo chObjs
} else {
nodeConfig.leaf = true;
//nodeConfig = NavTree.tree.getLoader().createNode(nodeConfig);
node.refresh(nodeConfig);
} // eo if
}, // eo updateNode
//****************************************************************************
//*
//* updateQuestionNode function
//* must be called each time a question node's attributes or children change
//*
//****************************************************************************
updateQuestionNode: function(oId) {
var nObj = ds.getObj(oId);
var tree = QuestionTree.tree;
var node = tree.getNodeById(oId);
// Re-build node config from DS object
var nodeConfig = {
id: oId,
text: nObj.getQuestionPrompt(),
icon: nObj.getIcon(),
cls: 'toplevelnodes'
};
if (nObj.hasAnswers()) {
nodeConfig.singleClickExpand = true;
nodeConfig.allowChildren = true;
nodeConfig.children = [];
nodeConfig.leaf = false;
nodeConfig.expanded = true;
node.refresh(nodeConfig);
var answers = nObj.getAnswers();
var ansDiv = '<span class="answer">';
Ext.each(answers, function(ans, index, allAns) {
ansDiv += '<img src="images/icon_answer.png"> ' + ans + '<br />';
}); // eo Ext.each
ansDiv += '</span>';
var ansNode = {
id: 'ansNode',
text: ansDiv,
leaf: true,
cls: 'test',
icon: GlobalConstants.imagesFolder + 's.gif'
}
var newNode = QuestionTree.tree.getLoader().createNode(ansNode);
node.beginUpdate();
node.expand();
// remove existing child nodes
while (node.hasChildNodes()) {
node.removeChild(node.item(0));
}
// add updated child nodes
node.appendChild(newNode);
node.endUpdate();
tree.expandPath(node.getPath(), 'id', function(bSuccess, oLastNode) { // expand parent node
if (bSuccess && tree.getNodeById(node.id)) {
tree.getNodeById(node.id).ensureVisible(); // scroll to node
tree.getNodeById(node.id).select(); // select node
} // eo if
}); // oe tree expandPath
} else {
nodeConfig.leaf = true;
node.refresh(nodeConfig);
} // eo if
} // eo updateQuestionNode
});
//EOF