用任意html替換ExtJS組件的內容

我有一個使用ExtJS 4.1的Web應用程序。 javascript是所有MVC。我有一家商店，對服務器進行JSON調用以獲取包含html標記的單個記錄，我想用其替換其中一個組件的內容。我可以驗證我的商店是否正常工作，並且我的控制器工作正常，但我在我的視圖setInnerHtml中使用的功能無法正常工作。用任意html替換ExtJS組件的內容

這裏是我的控制器代碼：

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功能？

來源

2012-08-28 Dan

你不應該混合項目/ HTML，至少不會在同一時間，所以你要麼需要：

1）頭

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

2的第一個孩子的呼叫更新）完全刪除子項目

第二個是更可取的，因爲有一個額外的子組件沒有任何用途，也沒有與單箇中心子區域的邊界佈局。

來源

2012-08-28 22:58:49

埃文 - 看起來這個傢伙有一個佈局問題（因此我相信容器從來沒有見過第一位）。根據我自己的回答/我刪除的評論。 – Izhaki

順便說一下，不確定你的答案是否正確。我不認爲他有分項目。而這[JsFiddle]（http://jsfiddle.net/Izhaki/2YnmG/2/）工作正常。 – Izhaki

這個問題有點含糊，但我的說法依然存在。如果您使用一堆子項創建一個容器，然後在容器上使用update（），則會覆蓋所有組件而不清除它們。 –

用任意html替換ExtJS組件的內容

回答

相關問題