PDA

View Full Version : No labels in my tree



texlnghorn
24 Feb 2013, 12:41 PM
I am new to extjs and I'm trying to create my first tree. The tree will show a menu of workflows that the user can select. The label should show the workflowName from the model instead of text. I know I need to add the workflowName to my model and I need to set the dataIndex to workflowName but I still cannot get it to display the labels. I can display the tree with 1 folder and 2 nodes but no labels appear. Can someone tell me what I'm doing wrong?

Model:

Ext.define('MyApp.model.Workflow', {
extend: 'Ext.data.Model',
idProperty: 'workflowKey',
fields: [
{name: 'workflowKey', type: 'string'},
{name: 'workflowName', type: 'string'}
]
});


View:

Ext.define('MyApp.view.dashboard.Workflow' ,{
extend: 'Ext.tree.Panel',
alias : 'widget.workflow',
store : 'Workflows',
height: 300,
width: 300,
useArrows: true,
collapsible: true,
rootVisible: false,
initComponent: function() {
this.columns = [
{ xtype: 'treecolumn', header: 'Workflows', dataIndex: 'workflowName', flex: 2}
];
this.callParent(arguments);
}
});


Json Data from the server using Jackson:


{
"workflowList": [
{
"workflowKey": "MAIN",
"workflowName": "Main",
"leaf": false,
"workflowList": [
{
"workflowKey": "MAIN_UPLOAD",
"workflowName": "Upload",
"leaf": true,
"workflowList": []
},
{
"workflowKey": "MAIN_DASHBOARD",
"workflowName": "Dashboard",
"leaf": true,
"workflowList": []
}
]
}
]
}

Farish
24 Feb 2013, 11:55 PM
For the tree's proxy reader, have you set the root to "workflowList"?

texlnghorn
25 Feb 2013, 7:09 AM
For the tree's proxy reader, have you set the root to "workflowList"?

Yes. I can see the tree and I get the number of nodes I'm expecting but they have no labels.


Ext.define('MyApp.store.Workflows', {
extend:'Ext.data.TreeStore',
model:'MyApp.model.Workflow',
autoLoad:true,


proxy:{
type:'ajax',
api:{
read:'services/dashboard/workflow/list.json'
},
reader:{
type:'json',
root:'workflowList'
}
}
});

Farish
25 Feb 2013, 10:41 AM
Try the following as your JSON response:



{
"workflowList": [
{
"workflowKey": "MAIN",
"workflowName": "Main",
"leaf": false,
"children": [
{
"workflowKey": "MAIN_UPLOAD",
"workflowName": "Upload",
"leaf": true,
"children": []
},
{
"workflowKey": "MAIN_DASHBOARD",
"workflowName": "Dashboard",
"leaf": true,
"children": []
}
]
}
]
}

texlnghorn
25 Feb 2013, 11:00 AM
I tried changing the subnodes to children however now I get a never ending tree of folders in my UI. And none of the folders has a label.

I also printed the store to the console and the data in the store does not contain the additional fields I added to the model. So I'm assuming that is why I have no labels. But now I need to figure out why the store does not contain the model.

texlnghorn
25 Feb 2013, 11:42 AM
If I put the fields property directly in the store as shown below, I get the labels. I would prefer to keep the mvc structure and separate the model and the store. But when I do define the model separately, the model is not used and i do not get the labels. I think I'm close to solving this.


Ext.define('MyApp.store.Workflows', {
extend:'Ext.data.TreeStore',
// model:'MyApp.model.Workflow',
fields:['workflowKey','workflowName','displayOrder'],
autoLoad:true,
proxy:{
type:'ajax',
api:{
read:'services/dashboard/workflow/list.json'
},
reader:{
type:'json',
root:'workflowList'
}
}
});

Farish
25 Feb 2013, 11:49 AM
while checking out the documentation for treestore, I found the following comment from one of the users:

"If you subclass TreeStore, be sure to add your model to the requires list or TreeStore will silently create its own model for you and ignore yours."

texlnghorn
25 Feb 2013, 12:19 PM
while checking out the documentation for treestore, I found the following comment from one of the users:

"If you subclass TreeStore, be sure to add your model to the requires list or TreeStore will silently create its own model for you and ignore yours."

I had found the same documentation. It seems weird that you would have to specify a model and a requires. Why doesn't the model implicitly set the requires? In any case this solved my problem. The updated store is below:


Ext.define('MyApp.store.Workflows', {
extend:'Ext.data.TreeStore',
requires:['MyApp.model.Workflow'],
model:'MyApp.model.Workflow',
autoLoad:true,
proxy:{
type:'ajax',
api:{
read:'services/dashboard/workflow/list.json'
},
reader:{
type:'json',
root:'workflowList'
}
}
});

Farish
25 Feb 2013, 12:42 PM
yes it is strange that requires config is needed. dont know if this is some design decision or a bug. havent investigated it much myself.