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/showthre...837#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);