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

Question

我有一个使用 ExtJS 4.1 的 Web 应用程序。 javascript都是MVC。我有一个商店，它对服务器进行 JSON 调用，以获取包含 html 标记的单个记录，我想用该记录替换我的一个组件的内容。我可以验证我的商店是否正常工作并且我的 Controller 是否正常工作，但我在 View 中使用的功能 setInnerHtml 无法正常工作。

这是我的 Controller 代码:

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

这是我的 View 代码:

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 函数？

Answer 1

您不应该混合 items/html，至少不能同时混合，因此您需要:

1) 调用更新 header 的第一个子元素

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

2)完全删除子项目

第二个是更好的选择，因为拥有额外的子组件没有任何意义，也没有带有单个中心子区域的边框布局。