Example of bar in a grid cell

[Thylia]

Hello,

One example of my work

http://www.thylia.fr/PhotoExport/ExtJs/bar_in_grid.png



var WorkJ = function(){
var sm, ds, cm;

grid : null;

return {
init : function(){
var url = 'WorkJ.php';
var moi = this;

ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: url,
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root:'LstTpt',
totalProperty:'NbTpt',
id:'Hor'
},
Ext.data.Record.create([
{ name:'Hor' },
{ name:'M' },
{ name:'F' },
{ name:'B' },
{ name:'L' },
{ name:'T' }
])
)
});

function renderCell(value, metadata, record, rowIndex, colIndex, store){
metadata.attr = 'style="font-size:11px;text-align:center;padding:1px 5px;overflow:hidden;position:absolute;"';
return value;
};

function renderGph(value, metadata, record, rowIndex, colIndex, store){
var record = store.getById("Total");
var pourcentage = value / record.data['T'] ;
var w = Math.floor(pourcentage*120);

var html = '<div class="x-progress-wrap">'+
'<div class="x-progress-inner">'+
'<div class="x-progress-bar" style="width:'+w+'px">'+
// '<div class="x-progress-text">'+
// '<div>&#160;</div>'+
// '</div>'+
'</div>'+
'<div class="x-progress-text x-progress-text-back">'+
// '<div>&#160;</div>'+
'<div>' + value + ' Transports</div>'+
'</div>'+
'</div>'+
'</div>';

if ( rowIndex == 15 ) return "";
else return html;
};

cm = new Ext.grid.ColumnModel([
{ header:'Horaire', dataIndex:'Hor', renderer:renderCell, width: 55 },
{ header:'Mar' , dataIndex:'M' , renderer:renderCell, width: 45 },
{ header:'Fau' , dataIndex:'F' , renderer:renderCell, width: 45 },
{ header:'Bra' , dataIndex:'B' , renderer:renderCell, width: 45 },
{ header:'Lit' , dataIndex:'L' , renderer:renderCell, width: 45 },
{ header:'Totaux' , dataIndex:'T' , renderer:renderCell, width: 55 },
{ header:'' , dataIndex:'T' , renderer:renderGph , width: 120 }
]);

sm = new Ext.grid.RowSelectionModel();

this.grid = new Ext.grid.GridPanel({
title: 'Charge',
renderTo: 'gWorkJ',
ds: ds,
cm: cm,
sm: sm,
width: 600,
autoHeight: true,
loadMask: true
});

ds.load();

return this;
}
};
}();

Ext.onReady(WorkJ.init, WorkJ, true);

[franckxx]

Salut,

Vraiment tr

[Ytorres]

Woah, very nice ! Thanks for sharing this :)

Another French ExtJs fan ? :)

-- Yannick, born in Bordeaux, live in Rennes :)

[penriver]

function renderGph(value, metadata, record, rowIndex, colIndex, store){
var record = store.getById("Total");
why are you using 'store.getById("Total");' instead record,what is the meaning of "Total"