web-dev-qa-db-ja.com

パネルのコンテンツを新しいコンテンツに置き換えるにはどうすればよいですか？

ビューポートに追加するregionContentパネルがあります。

コンテンツを新しいコンテンツに置き換えるにはどうすればよいですか？

_    ...
    var regionContent = new Ext.Panel({
        id: 'contentArea',
        region: 'center',
        padding:'10',
        autoScroll: true,
        html: 'this is the original content'
    });

    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [ regionMenu, regionContent ]
    });

    var newPanel = new Ext.Panel({
        region: 'east',
        title: 'Info Panel',
        width: 300,
        html: 'this is a panel that is added'
    });
    // regionContent.update(newPanel); //renders as javascript code ???
    // regionContent.remove(...) //how do I remove ALL CONTENT, I will not know what is in this panel to remove it specifically
    regionContent.add(newPanel); //adds to original content but does not replace it
    regionContent.doLayout();
    ...
_

.update()はこれを行います：

alt text

.add()はこれを行います：

alt text

extjs
13
Edward Tanguay

カードレイアウトのパネルを使用することをお勧めします。

var card=new Ext.Panel({
    layout:'card',
    activeItem:0,
    items:[ regionContent , newPanel ]
});

そのパネルは、ビューポート内に入ることができます。それらを切り替えるには、次のようなものを使用します。

card.getLayout().setActiveItem(1);

実用的な例については、2つのカードレイアウトを見てください。 http://dev.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html

8
Jere

.remove()を使用してHTMLを削除することはできません。これは、パネルのアイテムとは見なされないためです。したがって、.update()を使用してそのHTMLを削除してから、新しいパネルを追加する必要があります。

_// clear the html by replacing it with an empty string.
// calling update with no arguments would work as well.
regionContent.update('');

// add the new component
regionContent.add(newPanel);

// redraw the containing panel
regionContent.doLayout();
_

スクリーンショットから、新しいパネルを渡すことで.update()を使用したようです（例：.update(newPanel)）。このメソッドは、コンポーネントを置き換えるのではなく、HTMLを更新するために使用されます。反対の方向に進むには：

_regionContent.removeAll(); // if you want to remove all the items
regionContent.update('this is the original content');
regionContent.doLayout();
_

この正確な問題を解決するために、投稿したソリューションを本当に使用しましたか？私にとって、clearExtjsComponent()は、スクリーンショットのように、「これは元のコンテンツです」というHTML文字列を残します。

7
Mike M. Lin
Ext.getCmp('content-panel').body.update(record.get('id'));

これは本当にうまくいくでしょう

3
Praveen

これが私がこれを解決した方法です：

function clearExtjsComponent(cmp) {
    var f;
    while(f = cmp.items.first()){
        cmp.remove(f, true);
    }
}

次に、パネルのコンテンツを新しいコンテンツに置き換えたい場合は、次を使用します。

function replaceComponentContent(cmpParent, cmpContent) {
    clearExtjsComponent(cmpParent);
    cmpParent.add(cmpContent);
    cmpParent.doLayout();
}
1
Edward Tanguay