PDA

View Full Version : TreePanel - Root is shown double



talha06
27 Jul 2012, 2:53 PM
Hello everyone,

The root of my tree grid is shown double. [As at the screenshot]
I'll be happy if someone can help me.
Thanks in advance..

Here's my tree view defition:


Ext.define(appName + '.view.document.FolderTree', { extend : 'Ext.tree.Panel',
alias : 'widget.foldertree',
requires: [
'Ext.grid.plugin.CellEditing',
'Ext.tree.plugin.TreeViewDragDrop',
'Ext.grid.column.Action'
],
title : 'Folders',
iconCls : 'icon-folder',
store : 'FoldersTreeStore',
rootVisible : false,
folderSort : true,
animate : true,
autoScroll : true,
hideHeaders : true,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
dragText: 'Drag to reorder',
ddGroup: 'task'
}
},
initComponent: function() {
var me = this;


me.plugins = [me.cellEditingPlugin = Ext.create('Ext.grid.plugin.CellEditing')];


me.columns = [
{
xtype: 'treecolumn',
dataIndex: 'folderName',
flex: 1,
editor: {
xtype: 'textfield',
selectOnFocus: true,
validator: function(value){
value = Ext.String.trim(value);
return value.length < 1 ? this.blankText : true;
}
}
},
{
xtype: 'actioncolumn',
width: 24,
// icon: 'resources/images/cross-script.png',
// iconCls: 'x-hidden',
iconCls: 'icon-close',
tooltip: 'Delete'
}
];


this.btnCreateFolder = Ext.create('Ext.button.Button', {
iconCls : 'icon-new-folder',
tooltip : '<b>Create new folder</b>',
action : 'create-folder'
});


this.btnDeleteFolder = Ext.create('Ext.button.Button', {
iconCls : 'icon-delete-folder',
tooltip : '<b>Delete folder</b>',
action : 'delete-folder',
disabled: true
});


this.dockedItems = [{
xtype : 'toolbar',
dock : 'bottom',
items : [ me.btnCreateFolder, '-', me.btnDeleteFolder ]
}];


me.callParent(arguments);
}
});

TreeStore:


Ext.define(appName + '.store.FoldersTreeStore', { extend : 'Ext.data.TreeStore',
model : appName + '.model.Folder',
autoLoad : false,
autoSync : false,
proxy : {
type : 'ajax',
api : {
read : 'folder/load.ajax',
create : 'folder/saveOrUpdate.ajax',
update : 'folder/saveOrUpdate.ajax',
destroy : 'folder/delete.ajax'
},
reader : {
type : 'json',
root : 'data',
successProperty : 'success',
totalProperty : 'totalCount'
},
writer : {
type : 'json',
writeAllFields : true,
encode : true,
root : 'data'
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
},
sorters: [
{
property : 'order',
direction: 'ASC'
}
]
});

The data that I get from server:


{ "data": {
"leaf": false,
"folderId": 1,
"order": 1,
"expanded": true,
"iconCls": "icon-drive",
"folderName": "DRIVE",
"data": [{
"folderId": 2,
"folderName": "ggg",
"order": 2,
"leaf": true,
"iconCls": "icon-folder"
}]
},
"success": true,
"totalCount": 1
}

37573

Farish
27 Jul 2012, 11:23 PM
Take a look at the example of tree panel in the API docs. What I think is causing the problem is that you are using "data" inside "data". the child nodes of a node should be enclosed in "children". Changing it like this might help:



{
"data": {
"leaf": false,
"folderId": 1,
"order": 1,
"expanded": true,
"iconCls": "icon-drive",
"folderName": "DRIVE",
"children": [{
"folderId": 2,
"folderName": "ggg",
"order": 2,
"leaf": true,
"iconCls": "icon-folder"
}]
},
"success": true,
"totalCount": 1
}

Farish
27 Jul 2012, 11:27 PM
Also, you are using rootVisible: false. The root shouldn't be shown at all in this case. Do you want "DRIVE" to be visible or not? you may also need to change your response according to that. Best would be to take a look at the example given in the API Docs.

talha06
28 Jul 2012, 5:35 AM
Unfortunately changing data key to children didn't worked.. (again I see double root) I looked API docs first of course, but the sample that is given there is for static tree, I'm getting data from server. So I didn't define "root" explicitly. DRIVE will be my root and I want it to be visible..

Thanks for your care..

Farish
28 Jul 2012, 6:19 AM
hmmm. not sure then. does it help if you change your root from "data" to "root"?

talha06
28 Jul 2012, 6:49 AM
Unfortunately it didn't worked too..

scottmartin
28 Jul 2012, 8:32 AM
Would it have anything to do with the fact that you are loading the tree on initComponent, and then when you initialize it, it creates it again?

Scott.

talha06
28 Jul 2012, 9:10 AM
Would it have anything to do with the fact that you are loading the tree on initComponent, and then when you initialize it, it creates it again?

Scott.

it is still same Scott..

scottmartin
28 Jul 2012, 9:17 AM
Perhaps a small working test case.. Must be something simple we are just overlooking.

Scott.

talha06
28 Jul 2012, 12:04 PM
Yeah maybe Scott..

Any other ideas will be appreciated a lot..

scottmartin
1 Aug 2012, 3:05 PM
Any other ideas will be appreciated a lot..

Please provide a small test case using the static JSON file for data.

Scott.

talha06
2 Aug 2012, 4:45 PM
Please provide a small test case using the static JSON file for data.

Scott.
Thanks everyone for care; I've found my solution.
We need to define rootVisible property false and return a root json object with 2 properties: "data" and "text". "data" will store the records of tree and text is just a ".".