View Full Version : Having trouble with serialization routine for JSON output from editable Column Tree

9 Mar 2011, 3:37 PM
I am stuck. I have an editable column tree, revised from this thread: http://www.sencha.com/forum/showthread.php?20793-Editable-Column-Tree-example

I am using a revised serialization routine that was created by an EXTJS developer, Evan Trembley. The routine does not seem to be 'serializing' any value I add in manually to the columns, but it does serialize any values I drag over and drop onto the ColumnTree. If I drag a node from the grid I have attached in this application, and drop it into the column tree it will be read by the serialization routine. If I however try to add a new node to the ColumnTree and add in values that I want to save to the database, the routine only reads certain fields.

Here is the serialization routine:

Ext.override(Ext.tree.TreeNode, {
toJson: function(allowedAttributes){
var props = {}, children = [], key, attributes = this.attributes;

// Add defaults options, parentNode
//props.parentNode = this.parentNode ? (this.parentNode.attributes.ID || null) : null; // consider changing ID to EVID here
props.parentNode = this.parentNode ? (this.parentNode.attributes.EVID || null) : null; // consider changing ID to EVID here

for (key in attributes) {
if (allowedAttributes.indexOf(key) > -1) {
props[key] = attributes[key];
Ext.each(this.childNodes, function(child){

props.children = children;
return props;

serialize: function(allowedAttributes, excludeRoot){
var o = this.toJson(allowedAttributes);
if (excludeRoot) {
o = o.children;
return Ext.encode(o);

I am :s as I cannot get this routine to read the output from the column tree, if I add a new node to the ColumnTree manually. For example I have these columns - EVID, COL1, COL2, COL3, COL4, COMPLETED, CR, FR. i I enter a new node and edit the value showing in COL1, when I save - the serialization routine does not read the value under COL1, but pushes it to COL4, so that when it is stored in the database it is stored under COL4. If I drop a node from the grid, every column is read and stored and if I edit any column value the edits are also saved - but only for nodes dropped onto the ColumnTree.

Here is a copy of my code for calling the serialization routine:

onSave: function(){

function fn_MSG_Ext(message, title){
title: title,
msg: message,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO

if (top.doc_name == 'new_blank_doc') {
var myURL = 'application/views/json_tree_save.php?document_id=' + this.docId + '&name=' + this.docName + '&spreadsheet_id=' + this.ssId;
else {
var myURL = 'application/views/json_tree_save.php?document_id=' + this.docId + '&spreadsheet_id=' + this.ssId;

////original serialize routine
// var json = this.toJsonString(null, function(key, val){
// return ['EVID', 'COL1', 'COL2', 'COL3', 'COL4', 'COMPLETE', 'COMBO', 'FR', 'CR'].indexOf(key) > -1;
// }, {
// COL1: 'COL1',
// EVID: 'EVID',
// COL2: 'COL2',
// COL3: 'COL3',
// COL4: 'COL4',
// FR: 'FR',
// CR: 'CR'
// });

// using local routine to serialize output from tree
var json = this.getRootNode().serialize([ 'COL1', 'COL2', 'COL3', 'COL4', 'EVID', 'COMBO', 'COMPLETE', 'FR', 'CR' ], true);

// view resultset in alert box


url: myURL,
method: 'POST',
scope: this,
params: {
document_id: this.docId,
data: json
success: function(result, request){

var resultMessage = 'Saved to database';
fn_MSG_Ext(resultMessage, 'Success');

failure: function(result, request){

var resultMessage = result.responseText;
//var resultMessage = jsonData.data.result;
fn_MSG_Ext(resultMessage, 'Error');

If I click to add a new node to the ColumnTree, this is the code I call:

onAddFolder: function(){

var selectedItem = this.getSelectionModel().getSelectedNodes()[0];
if (!selectedItem) {
selectedItem = this.getRootNode();

title : 'Add requirement',
buttons : Ext.MessageBox.YESNO,
msg : 'Add Derived Requirement?',
scope : this,
fn : function(btn){
if (btn === 'yes'){

if (top._dbEVIDCount) {
this.getEVIDValue(selectedItem, top._dbEVIDCount+1);
else {
// call service to pull EVID from database
url : 'application/views/get_EVID_svc.php',
method : 'POST',
scope : this,
success : function(response) {
var res = Ext.util.JSON.decode(response.responseText);
var currentEVIDCount, dbEVIDCount, oldEVIDCount;

dbEVIDCount = res.evidCount;
top._dbEVIDCount = dbEVIDCount;

// open prompt to show new ID
if (res.evidCount) {
this.getEVIDValue(selectedItem, top._dbEVIDCount);




getEVIDValue: function(selectedItem, value) {

title: 'Adding Requirement',
value: value,
buttons: Ext.MessageBox.OKCANCEL,
prompt: true,
scope: this,
fn: this.doCreate.createDelegate(this, [selectedItem, false], 2)

return top._dbEVIDCount = top._dbEVIDCount+1;

doCreate: function(btn, evidVal, selectedItem, leaf){
if (btn == 'ok' && evidVal) {
var newNode = new Ext.tree.TreeNode({
EVID: evidVal,
COL1: 'Add text',
COL2: 'Add text',
COL3: 'Add text',
COL4: 'Add text',
FR: 'N',
CR: 'N',
leaf: leaf,
expandable: !leaf,
uiProvider: Ext.tree.ColumnNodeUI

if (selectedItem.isLeaf()) {
selectedItem.parentNode.insertBefore(newNode, selectedItem.nextSibling);
} else {
selectedItem.insertBefore(newNode, selectedItem.firstChild);

top.theNewCount = parseInt(evidVal) + 1;


The new node shows up where it should in the ColumnTree, and I can edit all the values, but the only values being read by the serialization routine and stored are COL4, COMPLETED, CR and FR. It appears that this routine is not outputting everything as JSON. IF the serialization could read everything and spit out everything again, that would be great.

I just want the 'onSave' routine to read any new values added into the ColumnTree, and actually to give me a read of ALL the values 'serialized' in the read, and spit out what is read so that I can store all of the changes to the database. I need it to read values dropped onto the ColumnTree as well as manual values added and edited.

Any help appreciated!