можно так
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script src='http://dev.sencha.com/deploy/ext-4.0.7-gpl/ext-all.js'></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/css/ext-all.css">
<script>
Ext.onReady(function() {
var text = Ext.String.repeat('<p>текст</p>', 30);
var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "Ветка", expanded: true, children: [
{ text: "Заголовок 1", leaf: true },
{ text: "Заголовок 2", leaf: true}
]},
{ text: "Заголовок 3", leaf: true}
]
}
});
var treePanel = Ext.create('Ext.tree.Panel', {
title: 'Tree',
width: 200,
store: treeStore,
rootVisible: false,
region: 'west'
});
treePanel.on('itemclick', function (view, rec, item, index) {
if (index) { // для простоты просто индекс элементов использовал
document.location.href = "#heading" + index;
}
});
var htmlPanel = Ext.create('Ext.panel.Panel', {
region: 'center',
autoScroll: true,
bodyStyle: 'padding:10px',
html: '<h1 id="heading1">Заголовок 1</h1>' + text +
'<h1 id="heading2">Заголовок 2</h1>' + text +
'<h1 id="heading3">Заголовок 3</h1>' + text
});
Ext.create('Ext.container.Viewport', {
layout : 'border',
defaults: {
split: true
},
items: [
treePanel,
htmlPanel
]
});
});
</script>
</head>
<body></body>
</html>