What's the easiest way to display NULL value as empty string instead of “null” string in an ExtJS grid?

Question

I have a server-side script (PHP) returning JSON data to populate an ExtJS Grid.

This data comes from a MySQL query, containing some NULL values.

When PHP encodes it into the JSON notation, it keeps the NULL intact:

{"id":"33","name":"Test1","url":null,"cls":"x-tree-noicon","expanded":true}

But... when this data is displayed in the ExtJS grid, it shows a " null " string in the place of the NULL value.

I don't want it to display " null ". I just want it empty (an empty string).

What is the easiest way to achieve this?

Thanks.

Answer 1

Have you define an Ext.data.Model? if you define and Ext.data Model and the use it in the Ext.data.Store to read the JSON string is very easy...

You just need to declare the field type: 'auto'

try this:

Ext.define('testModel', {
        extend  : 'Ext.data.Model',
        fields  :[
                     {name: 'Id', type: 'int'},
                     {name: 'name', type: 'string'},
                     {name: 'url', type: 'auto'},
                     {name: 'cls', type: 'string'},                     
                     {name: 'expanded', type: 'boolean'}
                  ]     
    });


var testStore = Ext.create('Ext.data.Store', {
                         model  : 'testModel',
                         proxy  : {
                                      type   : 'memory',
                                      reader : {type:'json'}
                                  }
                });

and use the testStore to fill up the data in your grid.

Answer 2

I'm not sure if the easiest but the first thing that comes to my mind is creating a custom renderer . You can use something like this:

function render(value){
    if(value === null){
        value = '';
    }
    return value;
}

Answer 3

WoLpH's answer is correct. My own question was somehow "incorrect"... :-)

In fact, I am dealing with a treegrid (Ext.ux.tree.TreeGrid), not a common ExtJS grid (Ext.grid.GridPanel).

The columns of the treegrid are not of Ext.grid.Column type, as the common grid. They are of Ext.list.Column type.

This means that the renderer configuration option does not apply (it exists and works on Ext.grid.Column, but not on Ext.list.Column).

To change the rendering of a Ext.list.Column, there is the tpl configuration option available, which uses the Ext.XTemplate mechanism.

Below, I share the configuration of my treegrid column that did what I wanted:

tpl: '<tpl if="url === null"></tpl><tpl if="url !== null">{url}</tpl>'

The configuration above made my column render an empty string for NULL values, instead of a " null " string, in the treegrid !

---

Final note: I voted on WoLpH's answer because it is correct. My question was misleading, and I preferred not to change/edit it, but to share my own findings as another answer. I also thank him because it made me focus on the right things. Thanks.

Answer 4

Your other option would be to handle it from the back end. You would need to check in the result set for any instances of NULL and convert them to empty strings before returning it back to the client.

Answer 5

In ExtJS 3.4 there is a useNull property that can be set for a numeric field (not strings though).

http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.data.Field-cfg-useNull

(Optional) Use when converting received data into a Number type (either int or float). If the value cannot be parsed, null will be used if useNull is true, otherwise the value will be 0. Defaults to false

Defaults to: false

Eg

{
    name: 'myId',
    type: 'int',
    useNull: true
},