JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.1/resources/css/ext-all.css">
JavaScript
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "Javascript",
checked: false
}, {
text: "ASP.net",
checked: false
}, {
text: "Also ASP.net",
checked: false,
children: [{
text: '1.1 foo',
checked: false,
children: [{
text: "1.1.1 ASP.net mvc",
expanded: true,
checked: false
}, {
text: "1.1.2 java",
expanded: true,
checked: false
}, {
text: "1.1.3 extjs",
expanded: true,
checked: false
}]
}, {
text: '1.2 bar',
checked: false
}]
}]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Example Tree',
width: 200,
height: 450,
store: store,
rootVisible: false,
multiSelect: true,
renderTo: Ext.getBody(),
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Search for ASP.net',
handler: function () {
var me = this,
panel = me.up('panel'),
rn = panel.getRootNode(),
regex = new RegExp("ASP.net");
rn.findChildBy(function (child) {
var text = child.data.text;
if (regex.test(text) === true) {
var pNode = child.parentNode;
while (pNode) {
pNode.expand();
pNode = pNode.parentNode;
}
child.expand();
panel.getSelectionModel().select(child, true);
}
...