Hi,
I want to insert a progress bar inside a grid cell, I tried with the following Code and I am able to see the Progress Bar. But, it is a static bar and it is not showing me any progress as it shows when I ran it outside the grid.
Let me know what is wrong in my Code.
Code Snippet :
<html>
<head>
<title>Progress</title>
<link rel="stylesheet" type="text/css"
href="lib/extjs/resources/css/ext-all.css" />
<script src="lib/extjs/ext-all-debug.js"></script>
<script>
Ext.onReady(function(){
Ext.create('Ext.data.Store', {
storeId:'mystore',
fields:['progress','goal','spent','remaining'],
data:{'items':[
{"progress":'100,100,0',"goal":100,"spent":100,"remaining":0}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
function dollarAdder(value)
{
return '$ '+value;
}
function extjsRenderer(val) {
var id = Ext.id();
var arr=val.split(",");
// alert(arr.length);
for(i=0;i<arr.length;i++)
{
for(j=0;j<arr.length;j++)
{
[I]// alert(arr);
}
}
(function() {
var bar = new Ext.ProgressBar({
height: 12,
renderTo: id,
animate: {from:{height: 20,width: 0},
to:{height: 20,width: 30},
duration: 200}
});
});
return '<div role="presentation" class="x-progress x-progress-default" id="progressbar"><div style="height: 19px; width: 140px;" id="' + id + '" class="x-progress-bar"></div></div><div style=" background-image: url(images/today.png);background-repeat: no-repeat;background-position: bottom right;width:180"></div>';
// return ('<div id="{0}"></div>', id);
// return (String.format('<div id="{0}"></div>', id));
// return String.format('<div class="x-progress-wrap"><div class="x-progress-inner"><div class="x-progress-bar{0}" style="width:{1}%;"><div class="x-progress-text x-progress-text-back">{2}</div><div class="x-progress-text //x-progress-text-front">{2}</div></div></div></div>', style, v, text_post);
}
Ext.create('Ext.grid.Panel', {
// title: 'Budget Goal',
store: Ext.data.StoreManager.lookup('mystore'),
columns: [
{header: 'Progress', dataIndex: 'progress',forceFit:true, width: 550,height:15,
renderer:extjsRenderer},
{header: 'Goal', dataIndex: 'goal', field: 'textfield',renderer:dollarAdder,forceFit:true, width: 420}
],
tbar: [{
text: 'Edit',
margin:'0 0 0 450',
handler: function(){
//alert("Edited");
}
},{
text: 'Delete',
handler: function(){
// alert("Deleted");
}
}],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
//height: 68,
height: 90,
width: 990,
// width: 972,
viewConfig: {
stripeRows: true
},
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
<!-- Nothing in the body -->
</body>
</html>
Thanks,
Sangita
