Comment puis-je remplacer le contenu d'un panneau par un nouveau contenu?

J'ai un regionContent panneau de laquelle j'ai ajouté à ma fenêtre.

Comment puis-je remplacer son contenu avec de nouveaux contenus?

    ...
    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() fait ceci:

Comment puis-je remplacer le contenu d'un panneau par un nouveau contenu?

.add() fait ceci:

Comment puis-je remplacer le contenu d'un panneau par un nouveau contenu?

source d'informationauteur Edward Tanguay

  1. 8

    Vous aurez envie d'utiliser un panneau de mise en carte:

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

    Que le panneau puis aller à l'intérieur de votre fenêtre. Pour basculer entre eux, vous pourrez utiliser quelque chose comme ceci:

    card.getLayout().setActiveItem(1);

    Prendre un regard sur les deux carte de mises en page des exemples de travail:
    http://dev.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html

  2. 7

    Vous ne pouvez pas supprimer le code HTML en utilisant .remove()car il n'est pas considéré comme un élément d'un groupe spécial. Si vous avez besoin d'utiliser .update() pour se débarrasser de que HTML, puis ajouter votre nouveau panneau.

    //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();

    De votre capture d'écran, on dirait que vous avez utilisée .update() en passant par le nouveau panneau, par exemple, .update(newPanel). Cette méthode est utilisée pour mettre à jour de HTML, pas de remplacer des composants. De faire le chemin inverse:

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

    Avez-vous vraiment l'utilisation de la solution que vous avez posté pour résoudre ce problème exact? Pour moi clearExtjsComponent() feuilles de la chaîne HTML "Ceci est le contenu d'origine" derrière, tout comme dans votre capture d'écran.

  3. 3
    Ext.getCmp('content-panel').body.update(record.get('id'));

    Ce sera vraiment travailler

  4. 1

    Voici comment j'ai résolu ce problème:

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

    puis quand je veux remplacer le contenu d'un panneau avec du nouveau contenu, j'utilise ceci:

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