View Full Version : Progress Bar in Grid Column Resize

17 Aug 2011, 1:06 PM
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:

<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.onReady(function() {
Ext.create('Ext.data.Store', {
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()



18 Aug 2011, 6:50 AM
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...


22 Feb 2012, 12:56 PM
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.