PDA

View Full Version : Dynamically adding and removing region by XType



martinrame
9 Feb 2012, 9:22 AM
Hi, I have this viewport and I want to dynamically remove and add content to "center" region. In this case, the content is created automatically by assigning the xtype "mainview".

In my controller, I can use this.getMainview().destroy() to remove it. How can I add it again?.


Ext.define('DEMO.view.BackgroundLayout', { extend: 'Ext.container.Viewport',
alias: 'widget.background',
requires: [ 'DEMO.view.Main' ],
layout: { type: 'border' ,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>'
},
{
xtype: 'mainview',
region: 'center',
forceFit: false,
height: 400
}
]
});
me.callParent(arguments);
}
});

mitchellsimoens
9 Feb 2012, 9:43 AM
A border layout requires to have a center region

martinrame
9 Feb 2012, 9:49 AM
Thanks mitchellsimoens.

Could you help me by telling how can I remove and add items to that center region. I don't want to remove the region, but it's items.

sskow200
9 Feb 2012, 9:50 AM
Possibly consider a card layout in your center region and always have a default blank card?

mitchellsimoens
9 Feb 2012, 9:52 AM
You could just have a normal container as the center region using fit layout. Then you can add and remove from that center container.

martinrame
9 Feb 2012, 10:11 AM
Ok, so my viewport looks like this:


Ext.applyIf(me, { items: [
{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>'
},
{
region: 'south',
html: '<h1 class="x-panel-header">Page footer</h1>'
},
{
xtype: 'panel',
layout: 'fit',
region: 'center',
items: [{
xtype: 'mainview',
forceFit: false,
height: 400
}]
}
]
});
...


I've placed a panel in center region, then added my "mainview" as an item to that region.

In my controller, I have access to mainview with "this.getMainview()", and can do this.getMainview().destroy() to remove it.

Now, how can I add my xtype as a new item to my panel?.

martinrame
9 Feb 2012, 10:32 AM
Right now I'm doing this:


background = this.getBackgroundLayout();
background.layout.regions.center.items.add(
Ext.create('DEMO.view.Main', {});
);

It seems to be created but it doesn't shows inside the center region.

mitchellsimoens
9 Feb 2012, 10:35 AM
I would do... viewport.down('container[region=center]') or setup a ref for 'container[region=center]'

martinrame
9 Feb 2012, 10:42 AM
Yes!, that worked.

To re-assign the view to my center region panel, I did this:


mainView = Ext.create('DEMO.view.Main', {});
item = background.down('container[region=center]');
item.add( mainView );

Thank you very much!.