Extjs treepicker error when reading from a json format - extjs

Question

I'm still new in Extjs. I have a TreeStore which reads a JSON string as an input and I can represent it in a tree panel. But when I try to use the treestore in a tree picker there is get this error:
Is there anything missing here?
// try to find a record in the store that matches the value
record = value ? me.store.getNodeById(value) : me.store.getRootNode();
Here is the JSON format:
{
success: true,
"children": [
{
"id": "G_1",
"text": "group1",
"leaf": false
},
{
"id": "G_2",
"text": "group2",
"leaf": false
}
]
}
And here is my TreeStore:
Ext.define('App.store.GroupTree', {
extend: 'Ext.data.TreeStore',
model: 'App.model.GroupTree',
requires: 'App.model.GroupTree',
proxy: {
type: 'ajax',
url: 'property/tree.json',
reader: {
type: 'json',
root:'children'
}
},
});
My treepicker item:
items: [
{
xtype: 'treepicker',
name: 'propertyCmb',
fieldLabel: 'Property',
labelWidth: 60,
displayField: 'text',
store: 'GroupTree',
valueField: 'id',
queryMode: 'local',
}
]
Here is the treestore model code
Ext.define('App.model.GroupTree', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string', useNull: true},
{name: 'text', type: 'string'},
{name: 'leaf', type: 'boolean'},
{name: 'expanded', type: 'boolean'}
]
});

Answer 1

The error occurse, because the store is not auto created when assigned to your treepicker like store: 'GroupTree'.
You have to create an instance of it first and that instance you need to assign to the treepicker. See the documentation http://docs.sencha.com/extjs/5.0.1/#!/api/Ext.ux.TreePicker-cfg-store .
The following should work
var groupStore = Ext.create('App.store.GroupTree');
groupStore.load();
var picker = Ext.create('Ext.ux.TreePicker',{
name: 'propertyCmb',
store: groupStore,
fieldLabel: 'Property',
labelWidth: 60,
displayField: 'text',
valueField: 'id',
queryMode: 'local',
renderTo: Ext.getBody()
});
A working fiddle can be found at https://fiddle.sencha.com/#fiddle/dip .