PDA

View Full Version : How to insert a Progress Bar inside a Grid Cell?



sangita.r9
13 Mar 2012, 11:21 PM
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++)
{
// alert(arr[i]);
}
}

(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

mitchellsimoens
14 Mar 2012, 7:08 AM
Try using Skirtle's ComponentColumn

http://skirtlesden.com/ux/component-column

sangita.r9
14 Mar 2012, 9:44 PM
Hi,

I tried to run the sample code given in http://skirtlesden.com/ux/component-column.
But, I am unable to do so. Is there any dependency for any plugin?


Thanks,
Sangita

skirtle
16 Mar 2012, 7:04 AM
You'll need the JS files for CTemplate and Component Column but that's it.

What problem are you seeing? Which browser and which ExtJS version? If you can't get it to work post your code and I'll take a look. Please use [CODE] tags when posting code.

sangita.r9
18 Mar 2012, 9:22 PM
Thanks.
Now it is working as expected.


Thanks,
Sangita

voodoov
19 Mar 2012, 2:58 AM
Hi sangita.r9,
Please "Mark Best Answer" to help others find their answers faster.

Thank you in Advance.