Remove items in the ViewPort

[sj_tt6]

Hi,

How do I remove a panel in the items of the Viewport and insert a new one in the run time?

My viewport is defined below

...
initComponent: function() {
        this.items = {
            dockedItems: [{
            	xtype: 'toolbar',
                dock: 'top',
                height: 80,
                items: [                   
                  {
                	   xtype: 'image',
                	   src: 'images/psbanner.png',
                	   height: 60,
                	   width: 500
                   }]
               }],
              items: [ {
                       xtype: 'panel_1',
                       layout: 'vbox'
              }]
};
this.callParent();

Is there a sample code how to use viewport.removeChilEls(Function testFn) ?

Thanks,

[sj_tt6]

I managed to remove the panel_1 from my ViewPort. Now I have tried to add a new panel to the position of the panel_1.

    	var child1 = viewport.down('panel');
    	console.log("child: " + child1.getId());
    	var child_panel_1 = child1.down('panel[id=panel_1_id]');
    	child1.remove(child_panel_1);
    //instantiates a new panel
   var panel_2 = Ext.create('MyApp.view.Panel_2');
    	console.log("Panel_2: " + panel_2.getId());
    	child1.addChildEls(panel_2);    // is it correct way to add a new panel?
    	child1.doLayout();

Thanks,

[sword-it]

Hi,

you can use following code:

viewport.remove("id of the panel");   // for remove the panel from viewport items

viewport.add( new Ext.panel.Panel({ title:'new Panel',id:'newpanel', height:100,html:'hello'}))   // for add new panel into viewport

[sj_tt6]

Hi sword-it,

I have tried the same code before, and now I tried your sample, it still does not work.
If we call viewport.remove('id of the panel') then there is an error.

In my viewport the first child is a panel. In this panel there are a toolbar and the panel (panel_1) I want to replace with another one (panel_2). I'm able to remove the panel_1 but I can not add the panel_2.

Thanks,

[vietits]

FYI:

Ext.onReady(function(){
    Ext.define('Panel1', {
        extend: 'Ext.panel.Panel',
        alias : 'widget.panel1'
    });
    Ext.define('Panel2', {
        extend: 'Ext.panel.Panel',
        alias : 'widget.panel2'
    });
    
    var viewport = Ext.create('Ext.container.Viewport', {
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: [{
            xtype: 'panel',
            title: 'Root panel',
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                height: 80,
                items: [{
                    xtype: 'button',
                    text: 'Replace panel',
                    handler: function(){
                        var panel = viewport.down('panel');
                        panel.remove(panel.child('panel1'));
                        panel.add({
                            xtype: 'panel2', 
                            title: 'Panel 2',
                            html: 'This is panel 2'
                        });
                        this.handler = function(){
                            alert('Already replaced');
                        }
                    }
                },{
                   xtype: 'image',
                   src: 'images/psbanner.png',
                   height: 60,
                   width: 500,
                }]
            }],
            items: [{
                xtype: 'panel1',
                title: 'Panel 1',
                layout: 'vbox',
                html: 'This is panel 1'
            }]
        }]
    });
});

[sword-it]

Hi,

you can try following code:

var view=Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [
    	{
        	xtype:'panel'
            , region:'north'
            , title:'PanelOne'
            , html:'Hello'
            , height:120
            , collapsible:true
            , id:'panelone'
        },
        {
        	title:'West'
            , region:'west'
            , items:[
            	{
                 xtype:'button'
                 , text:'AddAnotherPanel'
                 , handler:function(){
            		view.remove('panelone');
                	view.add(new Ext.panel.Panel({
                		title:'Anotherpanel'
                    	, html:'Hi'
                    	, region:'north'
                    	, height:120
                    	, collapsible:true
                    	, id:'anotherpanel'
                	}));
                	view.doLayout();
           		 }
                }
            ]
            
        },
        {
        	region:'center'
            , title:'center'
        }
    ]
});

[sj_tt6]

Vietits,

Again your skills help me solve the problems. Thank you very much!

To Sword-it,
Thank you for your help!

Cheers,