Building a panel dynamically based on a data store

[jpatten]

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();
navigationStore.load({
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');
navPanel.add(newPanel)

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

Thanks

[mitchellsimoens]

I did something like this:


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

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

items.push({
xtype : 'panel',
title : rec.get('...'),
html : rec.get('...')
});
}

panel.add(items);
} else {
//handle load failure
}
}
});

And it worked for me.

[slemmon]

As an aside, is there a benefit to creating the loop rather than using Ext.each?

[mitchellsimoens]

just a little more optimized.

[jpatten]

Thanks,

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'
}
}
});


and



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.