View Full Version : Extending Panel to create a nav bar

14 Dec 2009, 2:59 AM
I would like some advice on the best way to approach my design.

I am trying to create a navigation bar component by extending Ext.Panel. When the component is created I want add a number of child panels to the component and within each one a list of <a> elements. I can create the child panels within the initComponent function of my extended class and that works fine, however I am struggling to work out where to create the content for each child panel. I want to create the child panel content like this (where menuGroup is my bespoke config object):

var tmpl = new Ext.Template("<a class='navElement' href='{url}'>{title}</a>", {compiled:true, disableFormats:true});
for (var i=0; i < menuGroup.items.length; ++i)
tmpl.append(childPanel.body, menuGroup.items[i]);

However, this doesn't work because the child panels do not have a "body" property until they are rendered. I tried moving the above code to an onRender method in my extended class but the child panels still don't have a "body" property. If I move it to an onLayout method then it works but gets called multiple times and I don't think onLayout is the right place for this. How should I approach this?

Any advice greatly appreciated.