View Full Version : Building a panel dynamically based on a data store

10 Jan 2012, 6:11 AM
I'm new to Ext JS, so bare with me. I'm trying to construct a panel, containing page navigation items, with accordion layout, dynamically.

I'd like to populate the items within this panel according to data retrieved from a data store.
Within my NavigationController class, I'm retrieving my navigation items through a callback following a store load, like this:

onLaunch: function() {
var navigationStore = this.getNavigationStore();
callback: this.onNavigationLoad,
scope: this

onNavigationLoad: function() {
for (var i = 0; i < this.getNavigationStore().count(); i++) {
this.getNavigationSectionModel().load(i, {
success: function(nav) {
console.log("Loaded nav section: " + nav.get('name'));
nav.navItems().each(function(item) {
console.log("Loaded nav item 1: " + item.get('name'));
// TODO: create new panel and add to NavigationPanel

I'm not sure this is the best way of doing this. I've tried constructing panels for each navigation item, and then, for each panel:

var navPanel = Ext.getCmp('navigationPanel');

This seems to have no effect however. Am I approaching this in the right way?


10 Jan 2012, 7:35 AM
I did something like this:

callback : function(recs, op, success) {
if (success) {
var r = 0,
rNum = recs.length,
items = [],

for (; r < rNum; r++) {
rec = recs[r];

xtype : 'panel',
title : rec.get('...'),
html : rec.get('...')

} else {
//handle load failure

And it worked for me.

10 Jan 2012, 9:55 AM
As an aside, is there a benefit to creating the loop rather than using Ext.each?

10 Jan 2012, 10:31 AM
just a little more optimized.

10 Jan 2012, 1:53 PM

I think part of my problem lies in the fact the relationships between my model classes don't seem to work.

I have the following model classes:

Ext.define('Admin.model.NavigationSection', {
extend: 'Ext.data.Model',
fields: ['name', 'displaytext'],

hasMany: {model: 'Admin.model.NavigationItem', name: 'navItems'},

proxy: {
type: 'ajax',
url: 'data/navigation.json',
reader: {
type: 'json',
root: 'navigation'


Ext.define('Admin.model.NavigationItem', {
extend: 'Ext.data.Model',
fields: ['name', 'displaytext'],

belongsTo: 'Admin.model.NavigationSection',


And the following store:

Ext.define('Admin.store.Navigation', {
extend: 'Ext.data.Store',
model: 'Admin.model.NavigationSection',
autoLoad: true

So I expected the following to work:

store.each(function(section) {
console.log('Loaded nav section: ' + section.get('displaytext'));

section.navItems().each(function(item) {
console.log("Loaded nav item: " + item.get('name'));

Yet I get the error message "section.navItems is not a function".

Any ideas as to what's wrong would be greatly appreciated.