使用 Ext js "loader" 动态加载项目答案

【问题标题】：Dynamically loading items using Ext js "loader"使用 Ext js "loader" 动态加载项目
【发布时间】：2012-02-24 06:16:57
【问题描述】：

我是 ext js 的新手，一个客户希望我在某些网络中使用它，所以，我对它感到很头疼，我正在使用 ext js 4.0.7 和他们所谓的 MVC。我来啦。

我正在创建一个带有“卡片布局”的“面板”，并且我希望动态加载项目，所以我使用的是“加载器”。这是我正在做的一个例子

//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
      }
    ]
  } 
]

到目前为止一切顺利，我可以看到第一个带有按钮的工具栏。这没关系，但是当我尝试激活第二个工具栏时，出现错误。我正在使用这个：

Ext.getCmp('options-panel').layout.setActiveItem(1);

使用 firebug，我可以在控制台中看到：

TypeError: component is undefined
http://www.learningext.com.localhost/extjs/src/ComponentManager.js?_dc=1330059491008
Line 55

这里有趣的是，如果我从 .json 文件中复制代码并将其粘贴到我正在使用的“面板”的“项目”中，这意味着不使用“加载器”，一切正常！如果我保留“加载器”但更改面板的布局，我可以看到 2 个工具栏，那么我在这里缺少什么？装载机是否无法正常工作，还是我做错了什么？希望你能帮我解决这个问题。

谢谢

【问题讨论】：

标签： javascript extjs

【解决方案1】：

Ext.Loader 仅用于加载完整的类。如果您正在加载只是将 JSON 块加载为容器的子项，则可以使用 ComponentLoader 类。

这里有几个例子：http://dev.sencha.com/deploy/ext-4.0.0/examples/component-loader/component-loader.html

最后一个可能是你想要达到的目标。

【讨论】：

链接失效