View Full Version : Use Controller To Select 1st Node in Ext.tree.Panel

27 Jan 2012, 4:06 PM

I have tree panel as my app's navigation. I'm having trouble using a Controller to highlight/select the first tree node. It's easily done from within the tree panel itself:

listeners: {
afterrender: function(panel){
panel.getView().select(0); //hilite 1st item after load

But, I can seem to make it happen remotely, from a the navigation controller.

This is my Tree Panel and Tree Store code:
//add child items to treepanel (menu)
var pageArray = new Array();
pageArray[0] = new Array('myTest0', true, 'tree-cog-Icon', 'Dashboard');
pageArray[1] = new Array('myTest1', true, 'tree-paging-Icon', 'Paging Grid Array');
pageArray[2] = new Array('myTest2', true, 'tree-table-Icon', 'Table Panel');
pageArray[3] = new Array('myTest3', true, 'tree-col-Icon', 'Panel Column Rows');
pageArray[4] = new Array('myTest4', true, 'tree-error-Icon', 'Errors & Alerts');
pageArray[5] = new Array('myTest5', true, 'tree-wizard-Icon', 'Step by Step Wizard');
pageArray[6] = new Array('myTest6', true, 'tree-tab-Icon', 'Tab Panel');
pageArray[7] = new Array('myTest7', true, 'tree-development', 'Current Development');

//menu store (no model needed, accept Ext default)
var MenuStore = Ext.create('Ext.data.TreeStore', {
border: false,
root:{expanded: true}

//add menu item from array
var addMenuItem = function(){
var root = MenuStore.getRootNode();
for (i=0; i<pageArray.length; i++){ //step thru #of children
root.appendChild({ //assign attributes
id: pageArray[i][0],
leaf: pageArray[i][1],
iconCls: pageArray[i][2],
text: pageArray[i][3],

//defines menu for Dashboard
Ext.define('Nile.view.layout.MenuDashboard0', {
alias: 'widget.menutree',
extend: 'Ext.tree.Panel',
id: 'MenuDashboard0',
cls: 'MenuDashboard0',
useArrows: true,
lines: false,
animate: true,
autoScroll: true,
border: false,
store: MenuStore,
rootVisible: false,

initComponent: function() {
Ext.apply(this, {
//select 1st menu item after render
/*listeners: {
afterrender: function(panel){
panel.getView().select(0); //hilite 1st item after load

This is my Controller code:
//menu links
var dashboardLinks = new Array('MainDashboard', 'Pagination', 'TablePanel', 'PanelColRows', 'Messages', 'Wizard', 'TabPanel', 'TestCurrent');

Ext.define('Nile.controller.MenuDashboard0-controller', {
extend: 'Ext.app.Controller',
alias: 'widget.MenuDashboard0-controller',

//models: [],
//stores: [],

//views to control

refs: [
{ref:'MenuDashboard0', selector: 'MenuDashboard0'}

init: function() {
'menutree': {
afterrender: this.setMenuItemActive,
itemclick: this.menuTreeClick

//hilight first item in menu treepanel

setMenuItemActive: function(view,rec,item,index,eventObj){

menuTreeClick: function(view,rec,item,index,eventObj){
var content = Ext.getCmp('mainWrapper');
var container = content.add(Ext.create('Nile.view.layout.'+ dashboardLinks[index]));

Thanks Everyone!

31 Jan 2012, 7:49 AM
*please reformat your code to use code blocks. :-\ It's hard to read what's going on.

That said, you absolutely need to stop using Ext.getCmp.

31 Jan 2012, 8:25 AM
Hey Jay,

Thanks for the comment, and you are correct; I'm using controllers now that use the References & the Component Query engine to select the node after it's store loads. So, all in all this topic is closed. Sorry I didn't get to marking it as closed sooner.

As for the formatting the code here in Sencha's Q&A, well, I could use your help here for sure. I spent quite a bit of time lining-up all the code... But, when published all the indents/spaces are lost.

So, what's the secret to formatting in this forum?

1 Mar 2012, 9:14 AM
I believe what he meant was to edit your post and whereever you have actual code surround it use the # button in the editor to add the code block tag or you can manually code it a left brace CODE right brace and left brace /CODE right brace. I had to type it out or it will create a code block :)

1 Mar 2012, 10:42 AM
Got it, thanks for clearing this up!