1

この構成オブジェクトを使用して作成された extjs4 パネルがあります。

{ 
    title : 'Messages',
    region : 'north',
    height : 200,
    minSize : 75,
    maxSize : 250,
    cmargins : '0 0 5 0',
    html : '<i>Chat started on ' +  Ext.Date.format(dt, EI.datePattern)  + '</i>'
}

今、さらにhtmlを追加したいと思います。たとえば、追加したい

<p><span class="user">me:</span><span class="how are you?"></span></p>

時々私は

 thePanel.body.insertHtml("beforeEnd", chatHtml);

しかし、.body設定されていない場合もあります!! そのため、上記のコードを実行できません。それを行う適切な方法は何ですか？

4

2 に答える 2

5

パネルの body 要素は、パネルの render イベントが発生するまで使用できません。childElsこれは、任意のコンポーネントの構成の下にリストされているすべての要素で同じです。

要素をレンダリングする方法はいくつかあります。これは包括的なリストではありません。

  1. コンポーネントがコンテナの子アイテムである場合、コンポーネントは親コンテナがレンダリングされるときにレンダリングされます。deferredRenderこれに対する例外は、 configを使用する場合に、タブ パネルなどのカード レイアウトを使用するコンテナーです。

  2. コンポーネントがコンテナの子ではなくrenderTo、構成を使用している場合、非表示であっても、構築時にレンダリングされます。

  3. 非フローティング コンポーネントが構成を使用している場合autoRender、そのコンポーネントは、 などで最初に表示されたときにレンダリングされpanel.show()ます。両方を使用している場合はautoRender、autoShow構築時にレンダリングされます。

  4. ウィンドウなどのフローティング コンポーネントのデフォルトはautoShow: falseとautoRender: trueであるため、 を呼び出すまでレンダリングされませんwin.show()。true に設定autoShowすると、作成時にレンダリングされます。

  5. 上記のように使用しない限り、構成を使用するフローティング コンポーネントrenderToは作成時にレンダリングされ、非表示のままになります。autoShow

ウィンドウの子であるパネルがあるようですね。そのパネルをすぐにレンダリングするが非表示のままにするrenderTo: Ext.getBody()には、親ウィンドウで設定します。

または、パネルがレンダリングされる前にプロパティにアクセスすることもでき、panel.html変更はウィンドウが表示されたときに反映されます。したがって、内部コンテンツにアクセスする必要があるが、パネルがレンダリングされていることを保証できない場合は、次のようにすることができます。

if (panel.body) {
    panel.body.insertHtml("beforeEnd", chatHtml);
} else {
    panel.html += chatHtml;
}

最後に一つだけ。パネルの構成を設定してからレンダリングすると、元のコンテンツhtmlの後に と呼ばれる追加の div が存在します。clearElrender の後に呼び出すpanel.body.insertHtml()と、この div の後に新しい HTML が配置されます。これはあなたにとって問題になるかもしれないし、そうでないかもしれませんが、とにかく言及したいと思いました。

于 2012-08-24T22:17:08.523 に答える
1

thePanel.getTargetEl() を使用してみてください

ソースから:

getTargetEl: function() {
    var me = this;
    return me.body || me.protoBody || me.frameBody || me.el;
}
于 2012-08-24T18:28:54.753 に答える