ExtJS 4，自定义Ext.grid.Panel的布尔列值

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

You can try to override getValue

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