Resizer overlapping the subsequent div, after window resize

[Capt.JackSparrow]

I have a Container with a resizer attached to the south. This container is placed in the first of the 2 divs in the page.
The second div has a grid panel.
All is fine until I resize the page.
Once resized, if I try to resize the Container using the Resizer handle, the handle gets overlapped underneath the grid panel.

Is there a way to increase the resizer z-index?
Pls help me. I found a similar thread posted for Ext 1.x:
http://www.sencha.com/forum/showthread.php?7991-overlapping-Resizable-divs-unreachable-handles&p=510837#post510837



DataSlotFilter = Ext.extend(Ext.Container, {
//autoScroll : true,
//autoHeight : true,
flex:2,
initComponent: function(){
Ext.apply(this, {

});
DataSlotFilter.superclass.initComponent.apply(this, arguments);
}

});
Ext.reg('DataSlotFilter', DataSlotFilter);

var dsFilter = new DataSlotFilter({
id : 'dsFilter',
border : false,
frame : false,
listeners: {
afterrender: function(thisElt){
thisElt.resizer = new Ext.Resizable(thisElt.getEl(), {
dynamic: true,
handles: 's',
wrap:true,
pinned: true
});
thisElt.resizer.on('resize', thisElt.resizeHandler, thisElt);
}
},
resizeHandler: function(resizeableObj, width, height, rawWidth, rawHeight){
//Ext.getCmp('taskList').el.setStyle('padding-top', '5%');
this.syncSize();
this.doLayout();
}
});

[Animal]

BorderLayout does resizing for you. Do not do that.

[Capt.JackSparrow]

Thx for the reply, animal.
But in my case, the container I am having can add/delete dynamic rows(each row in turn is a container)
For brevity, I didnt post the complete Dataslot filter object code. Please find it below:



DataSlotFilter = Ext.extend(Ext.Container, {
//autoScroll : true,
//autoHeight : true,
flex:2,
layout:'border',
initComponent: function(){
Ext.apply(this, {

});
DataSlotFilter.superclass.initComponent.apply(this, arguments);
},
onRender: function(){
DataSlotFilter.superclass.onRender.apply(this, arguments);
addRowTitles();
new Ext.form.TextField({
renderTo:this.getId(),
id:'dynamicConditions',
name:'dynamicConditions',
hidden:true
});
new Ext.form.TextField({
renderTo:this.getId(),
id:'dynamicColumns',
name:'dynamicColumns',
hidden:true
});
this.addRow();
},

reset : function(){
var count = this.items.length;
filter = this,
this.items.each(function(item,index,length) {
if(count > 2 && index > 0){
filter.remove(item);
count--;
}
});
this.items.get(1).reset();
this.doLayout();
},

addRow : function(){
var c = getFilterRowCfg();
this.add(c);
if(this.items.length == 4){
this.syncSize();
//this.setAutoScroll(true);
}
this.doLayout();
},

deleteRow : function(item){
var count = this.items.length;
if(count > 2){
this.remove(item);
count--;
/*if(count == 3){
//this.setAutoScroll(false);
}*/
}
if(count == 2) {
var rowId = this.items.get(1).getRowId();
var delDsBtn = Ext.getCmp('delDsRowBtn_'+rowId);
this.items.get(1).remove(7);
delDsBtn.destroy();
this.items.get(1).insert(7,getResetButtonCfg(rowId));
}
//this.syncSize();
this.doLayout(false,true);
},

insertRow : function(index){
var cfg = getFilterRowCfg();
this.insert(index,cfg);
if(this.items.length == 4){
this.syncSize();
this.setAutoScroll(true);
}
//remove reset button if multiple rows.
var rowId = this.items.get(1).getRowId();
var resetBtn = Ext.getCmp('resetDs_'+rowId);
var count = this.items.length;
if(count > 2 && !Ext.isEmpty(resetBtn)) {
this.items.get(1).remove(7);
resetBtn.destroy();
this.items.get(1).insert(7, getDelButtonCfg(rowId));
}
this.doLayout(false,true);
}

});
Ext.reg('DataSlotFilter', DataSlotFilter);

Ext.ns('Bm.component');
Bm.component.rowIdCounter = 0;

dsFilterRow = Ext.extend(Ext.Container,{ layout:'hbox',
layoutConfig:{
align : 'middle'
},
border : false,
autowidth : true,
autoHeight : true,
rowId : 0,
defaults : {
margins:'0 5 0 5'
},
flex:2,
style:"margin-bottom:5px;margin-top:5px;",
bodyStyle:'background:#ffffff',
initComponent: function(){
Ext.apply(this, {

});
dsFilterRow.superclass.initComponent.apply(this, arguments);
},

getRowId : function() {
return this.rowId;
},

onRender: function(){
dsFilterRow.superclass.onRender.apply(this, arguments);
},

reset: function() {
this.items.each(function(item,index,length) {
if(item.getXType() != 'button' && item.getXType() != 'panel' && item.getXType() != 'component'){
item.clearValue();
}
});
this.restore();
},

restore : function(){
var dsCmb = this.items.get(1);
dsCmb.setDisabled(true);
if(this.items.get(3).getXType() != 'dsValue'){
var field = {xtype:'dsValue',flex:2};
this.remove(3);
this.insertField(3, field);
}
},

insertField : function(index, field){
this.insert(index, field);
this.doLayout();
}

});
Ext.reg('dsFilterRow', dsFilterRow);