TreePanel (folder) testing
Using ExtJS 3.0
by b_long
HTML
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<!doctype html>
<html>
<head>
<title>MessageBox</title>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/ext-all.js"></script>
<link href="http://extjs.cachefly.net/ext-3.0.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="toolbar" />
<div id="btn" />
</body>
</html>
JavaScript
Ext.onReady(function () {
console.log("Now rocking with ExtJS version: " + Ext.version);
var treePanel = new Ext.tree.TreePanel({
title: "TreePanel (folder selection) testing",
width: 250,
height: 250,
rootVisible: true, //root
root: new Ext.tree.AsyncTreeNode({
text: '', // Empty root folder
id: 'r',
children: [{
text: "Folder 'c1'",
id: 'c1',
children: [{
text: "Folder 'c1c1'",
id: 'c1c1',
leaf: true
}, {
text: "Folder 'c1c2'",
myid: 'c1c2',
leaf: true
}]
}, {
text: "Folder 'c2'",
id: 'c2',
children: [{
text: "Folder 'c2c1'",
leaf: true,
id: 'c2c1'
}, {
text: "Folder 'c2c2'",
leaf: true,
id: 'c2c2'
}]
}]
})
});
treePanel.render('toolbar');
treePanel.doLayout();
var runTests = function () {
// Test finding without expansion || Expecting null
treePanel.selectPath('/r/c2/c2c1');
console.log("Test #1 (Expecting null): " + treePanel.root.findChild('id', 'c1c1', true));
// Expand and then test finding
treePanel.expandPath('/r/c1/c1c1');
console.log("Test #2: " + treePanel.root.findChild('id', 'c1c1', true));
treePanel.root.findChild('id', 'c1c1', true).select();
// Test finding by non-framework property
console.log("Test #3: " + treePanel.root.findChild('myid', 'c1c2', true));
treePanel.root.findChild('myid', 'c1c2', true).select();
};
var btn = new Ext.Button({
renderTo: "btn",
id: 'test',
text: 'Run tests...',
handler:...