I am using ExtJs 4.1 tree panel. The model is having 4 fields. I need to search a node by 'Name' field and then I want to update one of the property of the returned node. What is the best way to achieve this?
I can always get the root node and then use following code.
var rn = tree .getRootNode();
var regex = new RegExp('some value', 'i');
rn.findChildBy(function (child) {
Ext.onReady(function() {
if(child.data.Name == 'XXXX'){
//DO soething
}
});
But is this the best way to search a node?
The actual tree panel
Ext.QuickTips.init();
//we want to setup a model and store instead of using dataUrl
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [{
name: 'task',
type: 'string'
}, {
name: 'user',
type: 'string'
}, {
name: 'duration',
type: 'string'
}, {
name: 'done',
type: 'boolean'
}]
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'memory'
},
root: {
"text": ".",
children: [{
task: 'First Child',
duration: 6.5,
user: 'Tommy Maintz',
leaf: true,
iconCls: 'task'
}, {
task: 'Testing',
duration: 2,
user: 'Core Team',
iconCls: 'task-folder',
children: [{
task: 'Testing First Child',
duration: 6.5,
user: 'Tommy',
leaf: true,
iconCls: 'task'
}, {
task: 'Mac OSX',
duration: 0.75,
user: 'Tommy Maintz',
iconCls: 'task-folder',
children: [{
task: 'FireFox',
duration: 0.25,
user: 'Tommy Maintz',
iconCls: 'task',
leaf: true
}, {
task: 'Safari',
duration: 0.25,
user: 'Tommy Maintz',
iconCls: 'task',
leaf: true
}, {
task: 'Chrome',
duration: 0.25,
user: 'Tommy Maintz',
iconCls: 'task',
leaf: true
}]
}, {
task: 'Windows',
duration: 3.75,
user: 'Darrell Meyer',
iconCls: 'task-folder',
children: [{
task: 'FireFox',
duration: 0.25,
user: 'Darrell Meyer',
iconCls: 'task',
leaf: true
}, {
task: 'Safari',
duration: 0.25,
user: 'Darrell Meyer',
iconCls: 'task',
leaf: true
}, {
task: 'Chrome',
duration: 0.25,
user: 'Darrell Meyer',
iconCls: 'task',
leaf: true
}, {
task: 'Internet Exploder',
duration: 3,
user: 'Darrell Meyer',
iconCls: 'task',
leaf: true
}]
}, {
task: 'Linux',
duration: 0.5,
user: 'Aaron Conran',
iconCls: 'task-folder',
children: [{
task: 'FireFox',
duration: 0.25,
user: 'Aaron Conran',
iconCls: 'task',
leaf: true
}, {
task: 'Chrome',
duration: 0.25,
user: 'Aaron Conran',
iconCls: 'task',
leaf: true
}]
}]
}]
},
folderSort: true
});
//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 700,
height: 500,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: false,
//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Task',
flex: 2,
sortable: true,
dataIndex: 'task'
}, {
//we must use the templateheader component so we can use a custom tpl
xtype: 'templatecolumn',
text: 'Duration',
flex: 1,
sortable: true,
dataIndex: 'duration',
align: 'center',
//add in the custom tpl for the rows
tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
formatHours: function(v) {
if (v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
}, {
text: 'Assigned To',
flex: 1,
dataIndex: 'user',
sortable: true
}]
});
});
