View Full Version : Links within Exjts to a certain panel

14 Jun 2011, 3:10 AM
What is the best way for internal linking? I've got a tree panel navigation on the left with content in the center. Also i got a FAQ button on the top of my page that loads a faq in the mainpanel, with his own tree navigation panel added on the left within the main panel. Oke, so that is the FAQ.

So when people browse through the my pages, i have sometimes a link that must refer to a specific section of the FAQ. So when the user clicks on "read more in FAQ" he must be leaded to the FAQ with already the page opened that is set in the link. So a navigation item must be active.

What is the best way to go on this? I am really new to Extjs, but i like it.

16 Jun 2011, 10:29 AM
This is quite similar to what the ExtJS docs do so you may want to take a look at how they work.

I've also knocked up an example based on your description, hope it's of some help. It's far from perfect but it does show off some techniques that may be useful to you.


My.FaqPanel = Ext.extend(Ext.Container, {
layout: {
align: 'stretch',
type: 'hbox'

initComponent: function() {
var root = new Ext.tree.TreeNode({expanded: true, text: 'Root'});

root.appendChild({text: 'Cats', nodeType: 'node'});
root.appendChild({text: 'Dogs', nodeType: 'node'});
root.appendChild({text: 'Rabbits', nodeType: 'node'});
root.appendChild({text: 'Birds', nodeType: 'node'});

var content = new Ext.BoxComponent();

var tree = new Ext.tree.TreePanel({
border: false,
ref: 'myTree',
root: root,
rootVisible: false,
width: 200

tree.getSelectionModel().on('selectionchange', function(selModel, node) {
content.update('Some stuff about ' + node.attributes.text);

this.items = [


selectPage: function(topic) {
this.myTree.getRootNode().findChild('text', topic).select();

My.MainContentPanel = Ext.extend(Ext.Panel, {
layout: 'fit',

html: [
'Click here for content about <a href="Cats">Cats</a>.',
'Click here for content about <a href="Dogs">Dogs</a>.',
'Click here for content about <a href="Rabbits">Rabbits</a>.',
'Click here for content about <a href="Birds">Birds</a>.'

afterRender: function() {
Ext.each(this.body.query('a'), function(anchor) {
var anchorEl = Ext.fly(anchor);
var href = anchorEl.getAttribute('href');

anchorEl.on('click', function(ev) {
// Prevent clicking the link from jumping to the href

// Trim off the #
}, this);
}, this);


showFaq: function(faqPage) {

var faqPanel = new My.FaqPanel();


if (faqPage) {

var mainContent = new My.MainContentPanel({
region: 'center'

new Ext.Viewport({
layout: 'border',
items: [
height: 50,
region: 'north',
xtype: 'container',
items: {
xtype: 'box',
autoEl: {
html: 'FAQ'
listeners: {
afterrender: function() {
this.getEl().on('click', function() {
layout: {
align: 'middle',
pack: 'end',
padding: 10,
type: 'hbox'
}, {
region: 'west',
root: new Ext.tree.TreeNode({text: 'Root'}),
split: true,
width: 300,
xtype: 'treepanel'