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

Question

J'ai un panneau regionContent que j'ajoute à ma fenêtre d'affichage.

Comment puis-je remplacer son contenu par du nouveau contenu?

... 
    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() ce que cela:

.add() ce que cela:

Answer 1

Vous souhaitez utiliser un panneau avec la mise en page de la carte:

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

Ce panneau peut ensuite entrer dans votre fenêtre d'affichage. Pour basculer entre eux, vous allez utiliser quelque chose comme ceci:

card.getLayout().setActiveItem(1); 

Jetez un oeil à deux mises en page de cartes pour des exemples de travail: http://dev.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html

Answer 2

Voilà comment je 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 un nouveau contenu, j'utilise ceci:

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

Answer 3

Vous ne pouvez pas supprimer le code HTML à l'aide de .remove(), car il n'est pas considéré comme un élément d'un panneau. Vous devez donc utiliser .update() pour vous débarrasser de ce code 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(); 

À partir de votre capture d'écran, il semble que vous avez peut-être utilisé .update() en passant dans le nouveau panneau, par exemple, .update(newPanel). Cette méthode est utilisée pour mettre à jour le code HTML et non pour remplacer les composants. Pour aller dans le sens inverse:

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

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

Answer 4

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

Cela va vraiment travailler