Adding a Checkbox in a Grid row and connect it to JSON?

[Condor]

Ext.grid.CheckColumn = function (config) {
    Ext.apply(this, config);
    if (!this.id) {
        this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
};
Ext.grid.CheckColumn.prototype = {
    init: function (grid) {
        this.grid = grid;
        this.grid.on('render', function () {
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
        }, this);
    },
    onMouseDown: function (e, t) {
        if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1) {
            e.stopEvent();
            var index = this.grid.getView().findRowIndex(t);
            var record = this.grid.store.getAt(index);
            record.set(this.dataIndex, record.data[this.dataIndex] === '1' ? '0' : '1');
        }
    },
    renderer: function (v, p, record) {
        p.css += ' x-grid3-check-col-td';
        return '<div class="x-grid3-check-col' + (v === '1' ? '-on' : '') + ' x-grid3-cc-' + this.id + '">&#160;</div>';
    }
};

[wavedan]

Ext.grid.CheckColumn = function (config) {
Ext.apply(this, config);
if (!this.id) {
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};
Ext.grid.CheckColumn.prototype = {
init: function (grid) {
this.grid = grid;
this.grid.on('render', function () {
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
onMouseDown: function (e, t) {
if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1) {
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, record.data[this.dataIndex] === '1' ? '0' : '1');
}
},
renderer: function (v, p, record) {
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col' + (v === '1' ? '-on' : '') + ' x-grid3-cc-' + this.id + '">&#160;</div>';
}
};

Ok, I did get it to work. But it seems it is not storing the new value in the database. What code do I need to write to get it to update the database automatically?

[Condor]

It only updates the store. If you want to update the database then you need to send a request to the server with the changed data and have your server process this.

[wavedan]

It only updates the store. If you want to update the database then you need to send a request to the server with the changed data and have your server process this.

Can you give me some sample code to update the database with the changed data?

[Condor]

Do you want do update on every single change or do you want a save button to save all changes?

ps. The server software you will have to write yourself. I'm not helping with that.

[wavedan]

Do you want do update on every single change or do you want a save button to save all changes?

ps. The server software you will have to write yourself. I'm not helping with that.

I think both options work fine. What option is the easiest one to code?

[Condor]

Doesn't really matter.

First solution:

store.on('update', function(store, rec, phase){
  if (phase == Ext.data.Record.EDIT) {
    Ext.Ajax.request({
      url: 'update-record.php',
      params: rec.data,
      success: function(){
        rec.commit();
      },
      failure: function(){
        rec.reject();
        Ext.Msg.alert('Error', 'Updating failed');
      }
    });
  }
});

[wavedan]

Seems I almost got it to work. It does update just fine, but what I need is to send a value, called, say, test, to identify the row. What would work for example is to send the value of any field in the grid, say, company_name but how do I accomplish this?
This is the code that I have so far, it updates the mySQL just fine:

 
onMouseDown: function (e, t) {
        if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1) {
            e.stopEvent();
            var index = this.grid.getView().findRowIndex(t);
            var record = this.grid.store.getAt(index);
            record.set(this.dataIndex, record.data[this.dataIndex] === '1' ? '0' : '1');
            Ext.Ajax.request({
      url: 'content/registercompany/registercompany.php?mode=oppdaterAktiv',
     // params: 'aktiv=' + this.grid.getView().findRowIndex(t), //+ ':' + record.data[this.dataIndex],
      params: 'aktiv=' +  record.data[this.dataIndex]+'&test=' + userCM.id,
      success: function(){
       Ext.Msg.alert('Oppdater', 'Oppdatert!');
      },
      failure: function(){
        //rec.reject();
        Ext.Msg.alert('Error', 'Updating failed');
      }
    });

[wavedan]

Ok, I almost got it to work.
The problem is that I need to fetch some data from the extJS grid, in order to select the correct ID from the database.
How can I retrieve the value of, say, 'company_name' or 'company_id' (which is hidden) in the grid and pass it on?
The value of the checkbox (aktiv) I am able to pass just fine using POST.

This is the code I have so far:

 
onMouseDown: function (e, t) {
        if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1) {
            e.stopEvent();
            var index = this.grid.getView().findRowIndex(t);
            var record = this.grid.store.getAt(index);
            record.set(this.dataIndex, record.data[this.dataIndex] === '1' ? '0' : '1');
            Ext.Ajax.request({
      url: 'content/registercompany/registercompany.php?mode=oppdaterAktiv',
     // params: 'aktiv=' + this.grid.getView().findRowIndex(t), //+ ':' + record.data[this.dataIndex],
      params: 'aktiv=' +  record.data[this.dataIndex]+'&test=' +Ext.id,
      success: function(){
       //Ext.Msg.alert('Oppdater', 'Oppdatert!');
      },
      failure: function(){
        //rec.reject();
        Ext.Msg.alert('Error', 'Updating failed');
      }
    });

[Condor]

params: {
  aktiv: record.get(this.dataIndex),
  test: Ext.id,
  company_id: record.get('company_id'),
  company_name: record.get('company_name')
}