CODEWITHSUNDEEP
javascriptextjs
Castro Roy
Castro Roy

Reputation: 7823

Dynamically loading items using Ext js "loader"

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

Answers (1)

Evan Trimboli
Evan Trimboli

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

Related Questions