PDA

View Full Version : Progress Bar in Grid Column Resize



dontbugme
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:


<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>

stevil
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...

stevil

charris
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.

Thanks!