Javascript 用任意html替换ExtJS组件的内容

我有一个使用ExtJS4.1的web应用程序。javascript都是MVC。我有一个存储，它向服务器发出JSON调用，以获取一条包含html标记的记录，我想用它替换我的一个组件的内容。我可以验证我的存储是否正常工作，控制器是否正常工作，但我在视图中使用的函数，

setInnerHtml

不工作

这是我的控制器代码：

Ext.define(appName + '.controller.Header', {
    extend: 'Ext.app.Controller',

    stores: [ 'Header' ],
    models: [ 'Header' ],
    views: [ 'main.Header' ],
    refs: [{ ref: 'headerView', selector: 'header' }],

    init: function () {
        var headerStore = this.getHeaderStore();
        headerStore.addListener('load', this.onHeaderStoreLoad, this);
    },

    onLaunch: function () {
    },

    onHeaderStoreLoad: function (store, records, successful) {
        if (successful) {
            var headerContent = store.first().data.html;
            var headerView = this.getHeaderView();
            headerView.setInnerHtml(headerContent);
        }
    }
});

以下是我的查看代码：

Ext.define(appName + '.view.main.Header', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.header',

    height: 30,
    layout: 'border',
    border: false,

    items: [
        { html: 'header', region: 'center' } // this is just a temporary placeholder and I'd like to replace this item with different html
    ],

    setInnerHtml: function (html) {
        this.update(html); // doesn't work
    }
});

---

我需要如何更改我的

setInnerHtml

函数？

您不应该将项目/html混合使用，至少不能同时使用，因此您需要：

1） 调用头的第一个子级的更新

this.items.first().update(html);

2） 完全删除子项

---

第二个更可取，因为有一个额外的子组件没有任何用途，也没有一个带有单个中心子区域的边界布局。

Evan-似乎这个家伙有布局问题（因此我认为容器从一开始就不可见）。根据我自己删除的答案/评论。顺便说一句，我不确定你的答案是否正确。我认为他根本没有子项。这个问题有点模糊，但我的声明仍然有效。如果您创建了一个包含一组子项的容器，然后在容器上使用update（），则会覆盖所有组件，而不会清理它们。