Reputation: 7823
I'm newbie with ext js, a client wants me to use it in some web, so, i'm crushing my head with it, i'm using ext js 4.0.7 and what they call MVC. Here i go.
I'm creating a "panel" with "card layout", and i want the items to be loaded dynamically, so i'm using a "loader". Here is an example of what i'm doing
//the panel
{
xtype:'panel',
id: 'options-panel',
title: 'Options',
region:'north',
layout:"card",
activeItem:0,
height: 200,
autoScroll: true,
items:{
loader:{
autoLoad : true,
url: '/staticdata/menu-toolbar-data.json',
renderer: "component"
}
}
}
//example data file menu-toolbar-data.json
[
{
xtype:'toolbar',
vertical: true,
height: 173,
id:"button1-toolbar",
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start'
},
items: [
{
text: 'Gestion Button1',
enableToggle: true
},'-',
{
text: 'Selection Button1',
enableToggle: true
}
]
},
{
xtype:'toolbar',
vertical: true,
height: 173,
id:"button2-toolbar",
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start'
},
items: [
{
text: 'G Button2',
enableToggle: true
},'-',{
text: 'S Button2',
enableToggle: true
}
]
}
]
So far so good, I can see the 1st toolbar with the buttons. This is ok, but when I try to activate the second toolbar, I get an error. I'm using this:
Ext.getCmp('options-panel').layout.setActiveItem(1);
with firebug, i can see this in the console:
TypeError: component is undefined
http://www.learningext.com.localhost/extjs/src/ComponentManager.js?_dc=1330059491008
Line 55
The funny thing here is that if I copy the code from the .json file and paste it in the "items" of the "panel" I'm ceating, meaning not using the "loader", everything works ok! If I keep the "loader" but change the panel's layout, I can see the 2 toolbars, so what am I missing here? Is the loader not working as it should, or am I doing something wrong? Hope you can help me with this.
Thanks
Upvotes: 2
Views: 6875
Reputation: 30092
Ext.Loader is only for loading full classes. If you're loading to just load a JSON block as child items of a container, you can use the ComponentLoader class.
There's several examples of it here: http://dev.sencha.com/deploy/ext-4.0.0/examples/component-loader/component-loader.html
The last of which is probably the kind of thing you're trying to achieve.
Upvotes: 3