View Full Version : Add new tab when node selected in treepanel

23 Dec 2011, 1:36 PM
I'm new to extjs and need advice. My app consists of a border layout with a nav on one side and a main window in the center region. Our navigation is a list of items displayed in a treepanel that is loaded via ajax. Our code looks like

Ext.require(['Ext.data.*', 'Ext.grid.*', 'Ext.tree.*']);

Ext.onReady(function () {
//we want to setup a model and store instead of using dataUrl
Ext.define('Report', {
extend: 'Ext.data.Model',
fields: [{
name: 'report_name',
type: 'string'
}, {
name: 'report_link',
type: 'string'

var store = Ext.create('Ext.data.TreeStore', {
//model: 'Report',
proxy: {
type: 'ajax',
url: ''
folderSort: true

//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var nav = Ext.create('Ext.tree.Panel', {
region: 'west',
title: 'Navigation',
frame: true,
width: '35%',
height: '100%',
// renderTo: Ext.(),getBody
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
collapsible: true

var win = Ext.create('Ext.tab.Panel', {
region: 'center',
items: [{
title: 'Bogus Tab',
html: 'Hello world 1'
}, {
title: 'Another Tab',
html: 'Hello world 2'
}, {
title: 'Closable Tab',
html: 'Hello world 3',
closable: true

Ext.create('Ext.window.Window', {
title: 'Reports',
height: 700,
width: 900,
minWidth: 350,
layout: 'border',
closable: false,
items: [nav, win]


What I'd like to do is automatically create a new tab in the main window whenever a node is clicked in the treepanel navigation.

Later on, I'd like to have the tab that is created load a grid that displays data loaded from a store with an ajax proxy.

I'm new to extjs and not sure how to do this. I've been poking through the examples and couldn't find one that matches my requirements. Any advice would be appreciated. Thank you!

23 Dec 2011, 3:17 PM
Download the migration app and it will provide what you are looking for:

Tutorial of application:


27 Dec 2011, 1:11 PM
Here are a few changes you want to make if you are using 4.1.

NavTree.js : remove listener from prototype

L: 14: (remove code)

listeners: {
'itemclick': function(view, model) {
this.fireEvent('navclick', this, model.data.id);

L: 40: (remove code)



L: 52: (change code)
'navclick': function(tree, nodeId) {


'itemclick':function (tree, nodeId) {

This original code worked in 4.0, but does not in 4.1