PDA

View Full Version : Adding tree node with custom fields



kid-
4 Jun 2012, 12:54 AM
Hello world!

I have a treepanel with columns defined:


{ // treepanel
title: 'title',
region: 'center',
padding: 5,
xtype: 'treepanel',
store: 'SomeTreeStore',
autoScroll: true,
useArrows: true,
singleExpand: true,
rootVisible: false,
...

Of cource I have a model definition in SomeTreeStore.
So, I'm trying to add a node:


var node = tree
.getStore()
.getRootNode()
.appendChild({
text: values['text'],
object: values['object'],
worker: values['worker'],
leaf: false,
iconCls: 'icon-application-bell',
});

But after that I see a node with a default folder icon and no data in columns. POST payload I see has no any custom field I added, just

{"text":"1111111111","id":null,"parentId":"root","leaf":false}

Where am I wrong?

vietits
4 Jun 2012, 1:26 AM
Do you define 'worker' and 'object' fields in your model?

kid-
4 Jun 2012, 1:33 AM
Yes of course I did. When I load data from the store at page load I receive tree with all fields filled correctly.

vietits
4 Jun 2012, 2:02 AM
You should post your code of model, store, tree here to be checked.

kid-
4 Jun 2012, 3:09 AM
OK, here you are.

model:


Ext.define('APP.model.Task', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id' },
{ name: 'title' },
{ name: 'object'},
{ name: 'object_obj'},
{ name: 'worker'},
{ name: 'worker_obj'},
{ name: 'dt'},
{ name: 'reminder', type: 'date' },
{ name: 'done', type: 'boolean', defaultValue: false },
{ name: 'text' }
],
});


Store:


Ext.define('APP.store.Tasks', {
extend: 'Ext.data.TreeStore',
model: 'APP.model.Task',
id: 'store-tasks',
autoLoad: true,
autoSync: true,
proxy: {
type: 'ajax',
api: {
create: '/task/create',
read: '/task/read',
update: '/task/update',
destroy: '/task/delete',
},
reader: {
type: 'json',
},
writer: {
type: 'json',
}
},
root: {
text: 'Tasks',
id: 'root',
expanded: true,
},
});


tree:


{ // treepanel
title: 'Task list',
id: 'task-list',
region: 'center',
padding: 5,
xtype: 'treepanel',
store: 'Tasks',
autoScroll: true,
useArrows: true,
singleExpand: true,
rootVisible: false,
viewConfig: {
copy: true,
allowContainerDrop: true,
allowParentInsert: true,
plugins: {
ptype: 'treeviewdragdrop',
}
},
columns: {
defaults: {
draggable: false,
resizable: false,
hideable: false,
},


items: [
{
dataIndex: 'status',
width:32,
height:22,
cls: 'column-header icon-ok',
align: 'center',
menuDisabled: true,
sortable: false,
hideable: false


},
{
xtype: 'treecolumn',
header: 'Description',
dataIndex: 'text',
menuDisabled: true,
flex:1,
sortable: false,
},
{
header: 'Object',
dataIndex: 'object_obj',
width: 120,
renderer: function(value, metaData, record, row, col, store, gridView) {if(!record.data)return ''; return record.data.object_obj ? record.data.object_obj.name : '' ; }
},
{
header: 'Worker',
dataIndex: 'worker_obj',
width: 120,
renderer: function(value, metaData, record, row, col, store, gridView) {if(!record.raw)return ''; return record.raw.worker_obj ? record.raw.worker_obj.name: ''; }
},
{
header: 'Date',
dataIndex: 'dt',
width: 120,
renderer: function(value, metaData, record, row, col, store, gridView) {if(!record.raw)return ''; var dt = new Date(); dt.setTime(record.raw.dt*1000); return _getDate(dt);}
},
{
header: 'Time',
dataIndex: 'dt',
width: 120,
renderer: function(value, metaData, record, row, col, store, gridView) {if(!record.raw)return ''; var dt = new Date(); dt.setTime(record.raw.dt*1000); return _getTime(dt);},
menuDisabled: true,
sortable: false,
},
],
},
}, // treepanel

vietits
4 Jun 2012, 5:13 PM
The following code works well on Chrome 19, Ext 4.1.0


Ext.onReady(function(){
Ext.define('APP.model.Task', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id' },
{ name: 'title' },
{ name: 'object'},
{ name: 'object_obj'},
{ name: 'worker'},
{ name: 'worker_obj'},
{ name: 'dt'},
{ name: 'reminder', type: 'date' },
{ name: 'done', type: 'boolean', defaultValue: false },
{ name: 'text' }
]
});


Ext.define('APP.store.Tasks', {
extend: 'Ext.data.TreeStore',
model: 'APP.model.Task',
id: 'store-tasks',
autoLoad: true,
autoSync: true,
proxy: {
type: 'ajax',
api: {
create: '/task/create',
read: '/task/read',
update: '/task/update',
destroy: '/task/delete',
},
reader: {
type: 'json',
},
writer: {
type: 'json',
}
},
root: {
text: 'Tasks',
id: 'root',
expanded: true,
}
});


var tree = Ext.create('Ext.tree.Panel', {
renderTo: Ext.getBody(),
height: 100,
title: 'Task list',
id: 'task-list',
region: 'center',
padding: 5,
xtype: 'treepanel',
store: Ext.create('APP.store.Tasks'),
autoScroll: true,
useArrows: true,
singleExpand: true,
rootVisible: false,
viewConfig: {
copy: true,
allowContainerDrop: true,
allowParentInsert: true,
plugins: {
ptype: 'treeviewdragdrop',
}
},
columns: {
defaults: {
draggable: false,
resizable: false,
hideable: false,
},
items: [{
dataIndex: 'status',
width:32,
height:22,
cls: 'column-header icon-ok',
align: 'center',
menuDisabled: true,
sortable: false,
hideable: false
},{
xtype: 'treecolumn',
header: 'Description',
dataIndex: 'text',
menuDisabled: true,
flex:1,
sortable: false,
},{
header: 'Object',
dataIndex: 'object_obj',
width: 120,
renderer: function(value, metaData, record, row, col, store, gridView) {
if(!record.data)return '';
return record.data.object_obj ? record.data.object_obj.name : '' ;
}
},{
header: 'Worker',
dataIndex: 'worker_obj',
width: 120,
renderer: function(value, metaData, record, row, col, store, gridView) {
if(!record.raw)return '';
return record.raw.worker_obj ? record.raw.worker_obj.name: '';
}
},{
header: 'Date',
dataIndex: 'dt',
width: 120,
renderer: function(value, metaData, record, row, col, store, gridView) {
if(!record.raw)return '';
var dt = new Date();
dt.setTime(record.raw.dt*1000);
return _getDate(dt);
}
},{
header: 'Time',
dataIndex: 'dt',
width: 120,
renderer: function(value, metaData, record, row, col, store, gridView) {
if(!record.raw)return '';
var dt = new Date();
dt.setTime(record.raw.dt*1000);
return _getTime(dt);
},
menuDisabled: true,
sortable: false,
}]
}
});


var node = tree.getRootNode().appendChild({text:'text1', object: 'object1', worker: 'worker1', object_obj: {name: 'object_obj1'}});
console.log(node);


});

kid-
5 Jun 2012, 10:31 PM
It doesn't work for me. Please post here console log you got.

vietits
5 Jun 2012, 10:42 PM
Here is the result of node shown in console log


constructor


childNodes: Array[0]
data: Object

allowDrag: true
allowDrop: true
checked: null
children: null
cls: ""
depth: 1
done: false
dt: ""
expandable: true
expanded: false
href: ""
hrefTarget: ""
icon: ""
iconCls: ""
index: 0
isFirst: true
isLast: true
leaf: false
loaded: true
loading: false
object: "object1"
object_obj: Object

name: "object_obj1"
__proto__: Object

parentId: "root"
qtip: ""
qtitle: ""
reminder: null
root: false
text: "text1"
title: ""
worker: "worker1"
worker_obj: ""
__proto__: Object

dirty: true
editing: false
events: Object
firstChild: null

kid-
6 Jun 2012, 12:19 AM
Damn it! Any ideas why?

By the way, I organize model, store and view in MVC manner. May be that's matters?

kid-
6 Jun 2012, 7:41 AM
Well, it seems it was an unpredictable load problem. I don't know why but in my store object model has been defined as an ImplicitModel instead of model I specified in store definition.
I add the following code in store definition and it works! It's a some sort of extjs magic, I think:)


requires: ['APP.model.Task'],