Results 1 to 7 of 7

Thread: Remove items in the ViewPort

  1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    104
    Answers
    1

    Default Remove items in the ViewPort

    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

    Code:
    ...
    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,

  2. #2
    Sencha User
    Join Date
    Jul 2010
    Posts
    104
    Answers
    1

    Default

    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.

    Code:
        	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,

  3. #3
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124

    Default

    Hi,

    you can use following code:

    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
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #4
    Sencha User
    Join Date
    Jul 2010
    Posts
    104
    Answers
    1

    Default

    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,

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    FYI:
    Code:
    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'
                }]
            }]
        });
    });

  6. #6
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124

    Default

    Hi,

    you can try following code:

    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'
            }
        ]
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  7. #7
    Sencha User
    Join Date
    Jul 2010
    Posts
    104
    Answers
    1

    Default

    Vietits,

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

    To Sword-it,
    Thank you for your help!

    Cheers,

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •