1. #1
    Sencha User
    Join Date
    Mar 2009
    Location
    Coimbatore, TN
    Posts
    36
    Vote Rating
    0
    Capt.JackSparrow is on a distinguished road

      0  

    Lightbulb Resizer overlapping the subsequent div, after window resize

    Resizer overlapping the subsequent div, after window resize


    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

    Code:
    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();
            }
        });

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    BorderLayout does resizing for you. Do not do that.

  3. #3
    Sencha User
    Join Date
    Mar 2009
    Location
    Coimbatore, TN
    Posts
    36
    Vote Rating
    0
    Capt.JackSparrow is on a distinguished road

      0  

    Default


    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:

    Code:
    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);

Similar Threads

  1. Layout and DIV overlapping
    By ShiN in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 29 Jul 2007, 1:45 AM
  2. Resize DIV/Table doesn't resize Grid
    By zaratine in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 19 Jul 2007, 12:46 PM
  3. How to resize the inner div follow window's resized in a borderlayout
    By hahaEr2003 in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 28 Apr 2007, 9:25 PM

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi