extjs - ExtJs のパネルから html コンテンツを取得する方法

Question

ExtJ は初めてです。パネル html コンテンツを取得するためのパネルで問題に直面しています。

xtype : 'panel',
id : 'first_block',
html : '<p>Hi this is belongs to first block.</p>',
listeners : {
    render : function(c) {
        c.body.on('click', function() {
            alert('' + this.id);
            alert(Ext.getCmp('first_block').items.getAt(0).getValue());
        });
}

HTML コンテンツを取得していませんが、「first_block-body」のような ID を取得しています。

前もって感謝します。

Answer 1

このhtmlプロパティは、コンポーネントのコンテンツに必要な HTML を定義します。この場合はExt.Panel.

Ext.Paneldivは、ヘッダー、フッター、ツールバーなどを提供するために、いくつかのレイヤーを作成します。

div一部のコンテンツを含むだけが必要な場合は、代わりに を使用しExt.Componentます。コンポーネントには がないbodyため、コードがいくつか変更されます。

xtype : 'component',
id : 'first_block',
html : '<p>Hi this is belongs to first block.</p>',
listeners : {
    render : function(c) {
        c.on('click', function() {
            alert('' + this.id);
            alert(this.el.dom.innerHTML);
        }, this);
}

関数呼び出しのスコープonを指定する 3 番目のパラメーターを呼び出しに追加したことに注意してください。thisまた、アラートを編集して、要素の innerHTML を出力するようにしました。

アップデート：

このコンポーネントをレイアウトで使用する場合は、そのheightと をwidth設定できる必要がある場合があります。つまりbox、Ext.BoxComponent.

Answer 2

Ext.getElementById('yourId').innerHTML