PDA

View Full Version : Container remove function doesn't remove the component within it



nil5286
3 May 2012, 7:33 AM
I am using extjs 4.1 and asp.net mvc3 and trying to remove the window from the "container" which is xtype for the center region of my viewport with the help of a custom close button which is on the window itself, but i am not able to remove the window from container neither am i getting any error in the firebug, these windows are dynamically added using the "Add window" button on the North region of viewport and also the links in the iframe set on the south and the west panel are not loaded.

Below is my code.


<link rel="stylesheet" type="text/css" href="../../Scripts/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../../Scripts/ext/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">

Ext.onReady(function () {
new Ext.Viewport({
layout: 'border',
defaults: {
frame: true,
split: true
},
items: [
{
//xtype: 'container',
title: 'North Panel',
region: 'north',
id: 'northRegion',
height: 150,
minHeight: 120,
maxHeight: 150,
split: true,
collapsible: true,
items: [{
xtype: 'button',
text: 'Add Window',
id: 'addWindowButton'
}]
},
{
xtype: 'container',
title: 'South Panel',
region: 'south',
id: 'southRegion',
height: 75,
split: false,
margins: {
top: 5
},
autoEl: {
tag: "iframe",
src: "http://www.google.co.in"
}
},
{
xtype: 'container',
title: 'West Panel',
region: 'west',
id: 'westRegion',
collapsible: true,
width: 100,
minWidth: 75,
maxWidth: 150,
autoEl: {
tag: "iframe",
src: "http://www.google.co.in"
}
},
{
xtype: 'container',
region: 'center',
layout: 'fit',
id: 'centerRegion'
}
]
});

var win = new Array();

var button = Ext.getCmp('addWindowButton');
var counter = 0;

button.on('click', function () {

win[counter] = new Ext.Window({
id: 'win' + counter,
title: 'windows ' + counter,
pageX: Ext.getCmp('centerRegion').x + (counter * 20),
pageY: Ext.getCmp('centerRegion').y + (counter * 20),
width: 500,
height: 200,
plain: true,
buttons: [{
id: 'btn' + counter,
text: 'Close',
handler: function () {
var index = this.id.replace('btn', '');
Ext.getCmp('centerRegion').remove(win[index], true);
Ext.getCmp('centerRegion').doLayout();
}
}]
}).show();
Ext.getCmp('centerRegion').add(win[counter]);
counter = counter + 1;

});

});

Any kind of help is appreciated. Thanks in advance.

vietits
3 May 2012, 6:02 PM
Try to config your windows with floating set to false.