1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    66
    Answers
    1
    Vote Rating
    0
    dontbugme is on a distinguished road

      0  

    Default Unanswered: Progress Bar in Grid Column Resize

    Unanswered: Progress Bar in Grid Column Resize


    I am trying to adapt an old example from ExtJS 3.x for having a progress bar in a grid. It works on the initial render, but it does not resize properly. I am not sure if this is a bug with the progress bar's resize event not firing, or if I am doing something wrong. Does anyone have any ideas? Here is the test case I am using:

    Code:
    <html><head>
    <title>Progress Bar in Grid</title>
    <link rel="stylesheet" type="text/css" href="ext-4.0.5/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-4.0.5/bootstrap.js"></script>
    <script type="text/javascript">
    Ext.require([
        'Ext.*'
    ]);
    
    
    Ext.onReady(function() {
    	Ext.create('Ext.data.Store', {
    		storeId:'simpsonsStore',
    		fields:['pct'],
    		data:{'items':[
    			{"pct":25},
    			{"pct":50},
    			{"pct":75},                        
    			{"pct":100}            
    		]},
    		proxy: {
    			type: 'memory',
    			reader: {
    				type: 'json',
    				root: 'items'
    			}
    		}
    	});
    
    
    	Ext.create('Ext.grid.Panel', {
    		title: 'Simpsons',
    		store: Ext.data.StoreManager.lookup('simpsonsStore'),
    		columns: [
    			{
    				header: 'Percent', 
    				dataIndex: 'pct',				
    				renderer: function(_value){
    					var id = Ext.id();
    				
    					Ext.Function.defer(function() {
    						var bar = new Ext.ProgressBar({						
    							renderTo: id,
    							value: _value / 100
    						});
    					}, 25);
    
    
    					return '<div id="' + id + '"/>';					
    				}
    			},
    		],
    		height: 200,
    		width: 800,
    		renderTo: Ext.getBody()
    	});
    });
    
    
    </script>
    </head>
    <body>
        
    </body>
    </html>

  2. #2
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Answers
    15
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    One thing you could try is, in your ProgressBar config, set "style: { width: '100%' }", and see if that changes anything.

    The 4.0 way to do this, although complex, would be to extend the Column object, and add the progress bar as an item to the object...

    stevil

  3. #3
    Sencha User charris's Avatar
    Join Date
    Sep 2010
    Location
    Brooklyn, NY
    Posts
    106
    Answers
    8
    Vote Rating
    12
    charris will become famous soon enough

      0  

    Default


    Does anyone have an actual example of how to do this with ExtJS 4? I've tied extending the column class and adding a ProgressBar as a child item, but it doesn't work.

    Thanks!

Thread Participants: 2

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