1. #1
    Sencha User jbird526's Avatar
    Join Date
    Jan 2008
    Location
    Westminster, MD
    Posts
    128
    Vote Rating
    0
    jbird526 is on a distinguished road

      0  

    Default ColumnTree render column based on containersize

    ColumnTree render column based on containersize


    This isnt the best code but might be helpful to someone. On render of the columntree i needed the first column to expand based on the size of the browser. It will not change on resize, but I will get back to that later. Anyway the conditional statement is long but was the quick fix I needed at the time. You might notice I use Sakis code template in this.

    Code:
    	onRender : function() {
    
    		// before parent code
    
    		// call parent
    		Ext.my.ConferenceColumnTree.superclass.onRender.apply(this, arguments);
    								
    
    		// after parent code, e.g. install event handlers on rendered components
    		this.headers = this.body.createChild({
    		cls : 'x-tree-headers'}, this.innerCt.dom);
    		// this.headers = this.getEl().createChild( //will make the header stick but takes away horizontal scroll
    		// {cls:'x-tree-headers'},this.body);
    
    		var cols = this.columns, c;
    		var totalWidth = 0;
    
    		for (var i = 0, len = cols.length; i < len; i++) {
    			c = cols[i];
    
    			// check if this column should be hidden
    			if (c.hidden === true)
    				continue;
    			var containerSize = this.ownerCt.ownerCt.getSize();
    			if((containerSize.width >= 901) && (containerSize.width <= 1000)){
    				cols[0].width = 470;
    			}else if((containerSize.width >= 1001) && (containerSize.width <= 1100)){
    				cols[0].width = 530;
    			}else if((containerSize.width >= 1101) && (containerSize.width <= 1200)){
    				cols[0].width = 630;
    			}else if((containerSize.width >= 1201) && (containerSize.width <= 1300)){
    				cols[0].width = 730;
    			}else if((containerSize.width >= 1301) && (containerSize.width <= 1400)){
    				cols[0].width = 830;
    			}else if(containerSize.width >= 1401){
    				cols[0].width = 930;
    			}
    			
    			
    			totalWidth += c.width;
    			this.headers.createChild({
    						cls : 'x-tree-hd ' + (c.cls ? c.cls + '-hd' : ''),
    						cn : {
    							cls : 'x-tree-hd-text',
    							html : c.header
    						},
    						style : 'width:' + (c.width - this.borderWidth) + 'px;'
    					});
    		}
    		this.headers.createChild({
    					cls : 'x-clear'
    				});
    		// prevent floats from wrapping when clipped
    		this.headers.setWidth(totalWidth);
    		this.innerCt.setWidth(totalWidth);
    
    	}, // eo function onRender
    	// }}}

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Thank you for sharing your work and knowledge.

    PS: Don't you want to move this thread to Examples and Extras? I guess more users could see it there and reply if they want.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Sencha User jbird526's Avatar
    Join Date
    Jan 2008
    Location
    Westminster, MD
    Posts
    128
    Vote Rating
    0
    jbird526 is on a distinguished road

      0  

    Default


    Quote Originally Posted by jsakalos View Post
    Thank you for sharing your work and knowledge.

    PS: Don't you want to move this thread to Examples and Extras? I guess more users could see it there and reply if they want.
    Woops, forgot where I was.

  4. #4
    Sencha User jbird526's Avatar
    Join Date
    Jan 2008
    Location
    Westminster, MD
    Posts
    128
    Vote Rating
    0
    jbird526 is on a distinguished road

      0  

    Default ColumnTree render column based on containersize

    ColumnTree render column based on containersize


    This isnt the best code but might be helpful to someone. On render of the columntree i needed the first column to expand based on the size of the browser. It will not change on resize, but I will get back to that later. Anyway the conditional statement is long but was the quick fix I needed at the time. You might notice I use Sakis code template in this.

    Code:
    	onRender : function() {
    
    		// before parent code
    
    		// call parent
    		Ext.my.ConferenceColumnTree.superclass.onRender.apply(this, arguments);
    								
    
    		// after parent code, e.g. install event handlers on rendered components
    		this.headers = this.body.createChild({
    		cls : 'x-tree-headers'}, this.innerCt.dom);
    		// this.headers = this.getEl().createChild( //will make the header stick but takes away horizontal scroll
    		// {cls:'x-tree-headers'},this.body);
    
    		var cols = this.columns, c;
    		var totalWidth = 0;
    
    		for (var i = 0, len = cols.length; i < len; i++) {
    			c = cols[i];
    
    			// check if this column should be hidden
    			if (c.hidden === true)
    				continue;
    			var containerSize = this.ownerCt.ownerCt.getSize();
    			if((containerSize.width >= 901) && (containerSize.width <= 1000)){
    				cols[0].width = 470;
    			}else if((containerSize.width >= 1001) && (containerSize.width <= 1100)){
    				cols[0].width = 530;
    			}else if((containerSize.width >= 1101) && (containerSize.width <= 1200)){
    				cols[0].width = 630;
    			}else if((containerSize.width >= 1201) && (containerSize.width <= 1300)){
    				cols[0].width = 730;
    			}else if((containerSize.width >= 1301) && (containerSize.width <= 1400)){
    				cols[0].width = 830;
    			}else if(containerSize.width >= 1401){
    				cols[0].width = 930;
    			}
    			
    			
    			totalWidth += c.width;
    			this.headers.createChild({
    						cls : 'x-tree-hd ' + (c.cls ? c.cls + '-hd' : ''),
    						cn : {
    							cls : 'x-tree-hd-text',
    							html : c.header
    						},
    						style : 'width:' + (c.width - this.borderWidth) + 'px;'
    					});
    		}
    		this.headers.createChild({
    					cls : 'x-clear'
    				});
    		// prevent floats from wrapping when clipped
    		this.headers.setWidth(totalWidth);
    		this.innerCt.setWidth(totalWidth);
    
    	}, // eo function onRender
    	// }}}
    Last edited by mystix; 20 Jul 2009 at 6:08 PM. Reason: merged duplicate thread

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Moved.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  6. #6
    Sencha User jbird526's Avatar
    Join Date
    Jan 2008
    Location
    Westminster, MD
    Posts
    128
    Vote Rating
    0
    jbird526 is on a distinguished road

      0  

    Default


    Thank you Saki

Thread Participants: 1