PDA

View Full Version : Remove items in the ViewPort



sj_tt6
9 Sep 2012, 9:16 PM
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
9 Sep 2012, 10:06 PM
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
9 Sep 2012, 10:18 PM
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
9 Sep 2012, 11:02 PM
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
10 Sep 2012, 12:06 AM
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
10 Sep 2012, 1:39 AM
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
10 Sep 2012, 8:03 AM
Vietits,

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

To Sword-it,
Thank you for your help!

Cheers,