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,483
    Vote Rating
    35
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar