PDA

View Full Version : How to display 'null' values in columns of grid



pirusira
9 Jun 2010, 4:04 PM
Hello all.

I made an insert action in my app. In the insert action, it adds a row into a table with 3 values.(the rest of columns are filled with 'null')
The grid displays the table with 5 columns.(not only the 3 columns)
So the grid doesn't display the newly rows those have 'null'.
I want to know how to display the rows those have 'null' in the grid.

Thanks in advance :)
Stan

devtig
18 Jun 2010, 2:24 AM
I have overridden some data Types in a way that saki explained here http://www.sencha.com/forum/showthread.php?97401-Date-column-in-Grid-empty-dates-should-be-null-or-empty-strings/page2



Ext.data.Types.INT.convert=function(v){
if (v===null) {return v;}
else {
return v !== undefined && v !== null && v !== '' ?
parseInt(String(v).replace(Ext.data.Types.stripRe, ''), 10) : 0;
}
}
Ext.data.Types.FLOAT.convert=function(v){
if (v===null) {return v;}
else {
return v !== undefined && v !== null && v !== '' ?
parseFloat(String(v).replace(Ext.data.Types.stripRe, ''), 10) : 0;
}
}
//make sure the record contains null for booleans instead of false
Ext.data.Types.BOOL.convert=function(v){
if (v===null) {return v;}
else {
return v === true || v === 'true' || v == 1;
}
}


These overrides make sure the Store contains:
-null values instead of 0 for int and float
-null values instead of false for bool.

Subsequently, to make the grid show those values as lets say '[null]' We need to extend the NumberColumn and BooleanColumn like so



Ext.ns('Ext.ux.grid');
Ext.ux.grid.NumberOrBlankColumn = Ext.extend(Ext.grid.NumberColumn, {
blankValue: null,
blankValueRendered: '[null]',
constructor: function(cfg){
Ext.ux.grid.NumberOrBlankColumn.superclass.constructor.call(this, cfg);
var blankValue = this.blankValue
var blankValueRendered = this.blankValueRendered
var renderer = this.renderer;
this.renderer = function(value){
return value===blankValue ? blankValueRendered : renderer.apply(this, arguments);
}
}
});
Ext.ux.grid.BooleanOrBlankColumn = Ext.extend(Ext.grid.BooleanColumn, {
blankValue: null,
blankValueRendered: '[null]',
constructor: function(cfg){
Ext.ux.grid.BooleanOrBlankColumn.superclass.constructor.call(this, cfg);
var blankValue = this.blankValue
var blankValueRendered = this.blankValueRendered
var renderer = this.renderer;
this.renderer = function(value){
return value===blankValue ? blankValueRendered : renderer.apply(this, arguments);
}
}
});
Ext.grid.Column.types['numberorblankcolumn'] = Ext.ux.grid.NumberOrBlankColumn;
Ext.grid.Column.types['booleanorblankcolumn'] = Ext.ux.grid.BooleanOrBlankColumn;


These extensions are mostly based on what Condor proposed here: http://www.sencha.com/forum/showthread.php?85492-Number-format

Then you use numberorblankcolumn instead of numbercolumn and booleanorblankcolumn in the colModel of your grid:



columns: [
{
"dataIndex": "nummer",
"header": "Nummer",
"xtype": "numberorblankcolumn",
"format": "0",
"align": "right"
},
{
"dataIndex": "floatje",
"header": "Floatje",
"xtype": "numberorblankcolumn",
"format": "0.00",
"align": "right"
},
{
"dataIndex": "datum",
"header": "Datum",
"xtype": "datecolumn",
"format": "Y-m-d H:i:s"
},
{
"dataIndex": "checkbox",
"header": "Checkbox",
"xtype": "booleanorblankcolumn"
}
]