I attached the app in a zip file to make it easier for you.
In the following app, the first time I select something in the combo box (North East), the tree is populated with data.
However, the second time I select something in the combo box (South East), I get an error that treeRoot is null.
The following code is used to get the root node, modify the root node data, and then set the root node.
I need to set the data like this because in my real app the data comes in as json flat data, which I parse and create tree data.
Thanks in advance!
var treeRoot = this.getMyTree().getStore().getRootNode();
treeRoot = CommonUtil.getTreeRoot(subData, treeRoot);
this.getMyTree().getStore().setRootNode(treeRoot);
---------------------- app.js ------------------
Ext.application({
name: 'APP',
extend: 'Ext.app.Application',
autoCreateViewport: true,
controllers: [
'Main'
]
});
---------------------- viewport ------------------
Ext.define('APP.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:[
'Ext.layout.container.Fit',
'APP.view.Main'
],
layout: {
type: 'fit'
},
items: [{
xtype: 'appMain'
}]
});
---------------------- controller ------------------
Ext.define('APP.controller.Main', {
extend: 'Ext.app.Controller',
views: [
'Main'
],
requires: [
'APP.util.CommonUtil'
],
refs: [{
ref: 'myCombobox',
selector: 'appMain #myCombobox'
}, {
ref: 'myTree',
selector: 'appMain #myTree'
}, {
ref: 'myGrid',
selector: 'appMain #myGrid'
}],
init: function() {
var me = this;
me.control({
'appMain #myCombobox': {
change: me.loadData
}
});
},
loadData: function() {
var data = this.getMyGrid().getStore().data.items;
var subData = [];
for(var idx = 0;idx < data.length;idx++) {
if(data[idx].data.region == this.getMyCombobox().getValue()) {
subData.push(data[idx]);
}
}
var treeRoot = this.getMyTree().getStore().getRootNode();
treeRoot = CommonUtil.getTreeRoot(subData, treeRoot);
this.getMyTree().getStore().setRootNode(treeRoot);
}
});
---------------------- model ------------------
Ext.define('App.model.MyTreeModel', {
extend: 'Ext.data.TreeModel',
proxy: {
type: 'memory'
},
idProperty: "uuid",
fields: [
{ name: 'text' },
{ name: 'uuid' },
{ name: 'region' },
{ name: 'state' },
{ name: 'city' },
{ name: 'storename' }
]
});
---------------------- utility file ------------------
Ext.define('APP.util.CommonUtil', {
alternateClassName: [
'CommonUtil'
],
statics:{
getTreeRoot: function(data, treeRoot) {
Ext.Array.each(data, function (item) {
var uuid = item.data.uuid;
var region = item.data.region;
var state = item.data.state;
var city = item.data.city;
var storename = item.data.storename;
var regionNode, stateNode, cityNode, storeNameNode;
// Get the region node if it already exists.
regionNode = treeRoot.findChild('text', region);
// The region node does not exist so add it.
if(Ext.isEmpty(regionNode) && !Ext.isEmpty(region)) {
regionNode = treeRoot.appendChild({ "text": region, "expanded": true, children: [], checked: false });
}
// Get the state node if it already exists in the region children.
stateNode = regionNode.findChild('text', state);
// The state node does not exist so add it.
if(Ext.isEmpty(stateNode) && !Ext.isEmpty(state)) {
stateNode = regionNode.appendChild({ "text": state, "expanded": true, children: [], checked: false });
}
// Get the city node if it already exists in the state children.
cityNode = stateNode.findChild('text', city);
// The city node does not exist so add it.
if(Ext.isEmpty(cityNode) && !Ext.isEmpty(city)) {
cityNode = stateNode.appendChild({ "text": city, "expanded": true, children: [], checked: false });
}
// Create the storename node to add.
storeNameNode = { "uuid": uuid, "text": storename, "leaf": true, checked: false };
if(!Ext.isEmpty(storeNameNode)) {
cityNode.appendChild(storeNameNode);
}
});
return treeRoot;
}
}
});
---------------------- view ------------------
Ext.define('APP.view.Main', {
extend: 'Ext.container.Container',
alias: 'widget.appMain',
margin: 30,
layout: {
type: 'vbox',
align: 'start'
},
items: [{
xtype: 'combobox',
width: 100,
itemId: 'myCombobox',
emptyText: 'Select',
valueField: 'region',
displayField: 'region',
store: Ext.create('Ext.data.Store', {
fields: [
{name: 'region'}
],
data: [
{region: 'North East'},
{region: 'South East'},
{region: 'West Coast'}
]
})
}, {
xtype: 'treepanel',
itemId: 'myTree',
width: 500,
margin: '30 0 30 0',
singleExpand: false,
rootVisible: false,
hideHeaders: true,
columns: [{
xtype: 'treecolumn',
flex: 1,
dataIndex: 'text'
}],
store: Ext.create('Ext.data.TreeStore', {
model: 'App.model.MyTreeModel',
root: {
expanded: true,
children: []
}
})
}, {
xtype: 'gridpanel',
itemId: 'myGrid',
width: 500,
columns: [{
text: 'Region',
dataIndex: 'region'
}, {
text: 'State',
dataIndex: 'state'
}, {
text: 'City',
dataIndex: 'city'
}, {
text: 'Store Name',
dataIndex: 'storename'
}],
store: Ext.create('Ext.data.Store', {
fields: [
{name: 'uuid'},
{name: 'region'},
{name: 'state'},
{name: 'city'},
{name: 'storename'}
],
data : [
{
"uuid": "s1",
"region": "North East",
"state": "New York",
"city": "Buffalo",
"storename": "Super Discounts"
},
{
"uuid": "s2",
"region": "North East",
"state": "New York",
"city": "New York",
"storename": "Big Y"
},
{
"uuid": "s3",
"region": "North East",
"state": "Massachusetts",
"city": "Boston",
"storename": "Shop Rite"
},
{
"uuid": "s4",
"region": "South East",
"state": "Florida",
"city": "Bonita Springs",
"storename": "Bealls"
},
{
"uuid": "s5",
"region": "South East",
"state": "Georgia",
"city": "Atlanta",
"storename": "Shermans"
},
{
"uuid": "s6",
"region": "South East",
"state": "Florida",
"city": "Miami",
"storename": "Bealls"
},
{
"uuid": "s7",
"region": "West Coast",
"state": "Oregon",
"city": "Portland",
"storename": "Lucky"
},
{
"uuid": "s8",
"region": "West Coast",
"state": "Washington",
"city": "Seattle",
"storename": "Starbucks"
},
{
"uuid": "s9",
"region": "West Coast",
"state": "California",
"city": "San Francisco",
"storename": "Safeway"
},
{
"uuid": "s10",
"region": "West Coast",
"state": "California",
"city": "San Jose",
"storename": "Safeway"
},
{
"uuid": "s11",
"region": "West Coast",
"state": "California",
"city": "Sunnyvale",
"storename": "Rite Aid"
}
]
})
}]
});
ExtJS 4.2.2 tree root node is null second time use getRootNode().
Aucun commentaire:
Enregistrer un commentaire