View Full Version : Uncaught TypeError: Cannot call method 'bringToFront' of undefined

23 Aug 2013, 6:18 AM

I try to change which container is at the front depending on which node was clicked.

I have the following set up :

Ext.define('ContainerList', {
singleton : true,

current : null,
taskContainer: null,
searchContainer: null

Ext.define('MainPanel', {
singleton: true,

current : null

Ext.onReady(function () {

@* Below are the viewport and panel that contain all of the application components*@

var applicationViewPort = Ext.create('Ext.container.Viewport', {layout: 'fit'});
var applicationPanel = Ext.create('Ext.panel.Panel', {
width: @BFE.Frontend.Main.ApplicationMinWidth + @BFE.Frontend.Main.MenuWidth,
layout: 'border',
renderTo: Ext.getBody()


@* The sidePanel contains the menu options that are displayed on the left side of the application.
The mainPanel is used for the rest of the application needs, such as displaying task grids, users, etc *@
@*var mainPanel = new Base.Panel();*@
MainPanel.current = new Base.Panel();

var sidePanel = new Base.TreePanel('asd', 'Main Menu', sidePanelStore);

sidePanel.addListener('itemclick', 'loadView');


@* taskContainer is the default container that is displayed when the application is loaded for the first time *@
@*var taskContainer =
var searchContainer = *@

ContainerList.taskContainer = new Base.Container('@BFE.Frontend.MyTask.Container');
ContainerList.searchContainer = new Base.Container('@BFE.Frontend.Search.Container');
ContainerList.current = ContainerList.taskContainer;

@* The GridPanels for the various containers are added to the container in the lines below
Params : ID, Title, Columns*@
ContainerList.taskContainer.add(new Base.GridPanel('@BFE.Frontend.MyTask.GridPanel', 'My Tasks', columns));
ContainerList.taskContainer.add(new Base.GridPanel('@BFE.Frontend.PendingTask.GridPanel', 'Pending Tasks', columns));
ContainerList.taskContainer.add(new Base.GridPanel('@BFE.Frontend.SwitchUser.GridPanel', 'Switch User', columns));

ContainerList.searchContainer.add(new Base.GridPanel('@BFE.Frontend.Search.GridPanel', 'Search', columns));




The function that handles the change is under my custom TreePanel class :

Ext.define('Base.TreePanel', {
extend: 'Ext.tree.Panel',

title: 'Main Menu',
width: @BFE.Frontend.Main.MenuWidth,

animate: false,
autoscroll: true,
collapsible: true,
collapseDirection: 'left',
collapseMode: 'header',
frame: false,
lines: false,
region: 'west',
rootVisible: false,
useArrows: true,
renderTo: Ext.getBody(),
store: '',

constructor : function(config)

constructor : function(id, title, store)
this.id = id;
this.title = title;
this.store = store


loadView : function(view, record, item)

if (record.get('id') == "@BFE.Frontend.Main.CurrentTasksNode")
ContainerList.current = ContainerList.taskContainer;
else if (record.get('id') == "@BFE.Frontend.Main.SearchNode")
ContainerList.current = ContainerList.searchContainer;


However, I get the error specified in the title. Any ideas?

Gary Schlosberg
29 Aug 2013, 1:21 PM
Is it possible that the container that you're bringing to front hasn't been rendered yet?