ExtJS 4, customize boolean column value of Ext.grid.Panel

4
votes

Good day, i have a grid with boolean column:

 var grid = Ext.create('Ext.grid.Panel', {
      ...
      columns: [{
           dataIndex: 'visibleForUser',
           text: 'Visible',
           editor: {
              xtype: 'checkboxfield',
              inputValue: 1 // <-- this option has no effect
           }
      },
      ...

Grid's store is remote via JSON proxy. When i save or update row, the resulting JSON look like:

{... visibleForUser: false, ... }

As you see, ExtJS serializes checkbox value as true or false JSON terms. I need to customize this and serialize to, say, 1 and 0, any suggestion how to accomplish this ? Thank you.

3
javascriptextjsextjs4
I had the same problem last week. The checkboxfield takes true, 'true', '1', 'on' but returns only boolean! I think you have to override the checkboxfield-class to accomplish that. – devOp

3 Answers

5
votes

I've just changed my checkboxes system-wide to always act/respond to 0 and 1:

Ext.onReady(function(){
    // Set the values of checkboxes to 1 (true) or 0 (false), 
    // so they work with json and SQL's BOOL field type
    Ext.override(Ext.form.field.Checkbox, { 
        inputValue: '1',
        uncheckedValue: '0'
    });
});

But you can just add this configs per checkbox.

3
votes

Ext JS 4.1.1 has a new serialize config on record fields. When a writer is preparing the record data, the serialize method is called to produce the output value instead of just taking the actual field value. So you could do something like this:

fields: [{
    name: "visibleForUser",
    type: "boolean",
    serialize: function(v){
        return v ? 1 : 0;
    }
    /* other fields */
}]

I try to avoid overriding default component behavior whenever possible. As I mentioned, this only works in 4.1.1 (it was introduced in 4.1.0 but I believe it was broken). So if you're using an earlier version, one of the other answers would suit you better.

1
votes

You can try to override getValue

Ext.define('Ext.form.field.Checkbox', {
    override : 'Ext.form.field.Checkbox',
    getValue: function () {
        return this.checked ? 1 : 0;
    }
});