PDA

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



qt4x11
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: 'http://10.0.0.9:8005/ReportServlet?companyID=3&action=reportList'
},
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]
}).show();


});


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!

scottmartin
23 Dec 2011, 3:17 PM
Download the migration app and it will provide what you are looking for:
http://cdn.sencha.io/ext-3-to-4-migration-pack.zip

Tutorial of application:
http://www.sencha.com/blog/ext-js-3-to-4-migration

Regards
Scott.

scottmartin
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)

this.addEvents('navclick');

App.js



L: 52: (change code)
from:
'navclick': function(tree, nodeId) {
this.syncNavigation(nodeId);
},



to:




'itemclick':function (tree, nodeId) {
this.syncNavigation(nodeId.data.id);
},


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

Regards,
Scott.