EXTJS - 2 Grids with checkbox model--disable checkbox in one grid if corresponding checkbox in other grid is selected?

Question

I have two grids with the same records, but different stores.

Basically, if record A is selected in grid A, i want to disable the checkbox for record A in grid B.

I know I can listen for "beforeselect" event on either grid,for example grid A, but then how would i "get" the records from grid B? Once I have the recs, I can check to see if its selected or not, then I can enable/disable checkbox for other grid by simply returning true/false.

thank you

Answer 1

Thanks for your answer Jesse. I had came up with this, it was actually quite simple. I listened for the "beforeselect" event on both grids in controller:

//beforeselect handler
gridAHandler: function (grid, rec) {

  var gridBSelections = this.getGridB().getSelectionModel().getSelection();
  for(var i = 0; i<gridBSelections.length; i++) {
    if(rec.get("NAME") == gridBSelections[0].data.NAME) {
      return false;
    }
  }
}

So if i go to make a selection on gridA, the for loop will check to see if its corresponding column in gridB has been selected. If its selected, it will be in the gridBSelections array, so gridA NAME will equal gridB NAME (NAME columns on both grids share the same values), so i return false;

of course, handler for gridB will be exactly the same but with opposite values.``

posted this as another solution for anyone having the same prob.

thx

Answer 2

Ok, I ended up doing a checkcolumn as it was easier to do in line code. You can throw this code in fiddle.sencha.com and it will work.

Panel 1 in the example is the one you can check and it will return the values of Panel1 and compare them against Panel2 and state if the check value on both. You could then do whatever you wanted.

If you did the selection model route you would put a change function in the controller and in the function just do something like:

var gridSelected = Ext.ComponentQuery.query('panel1')[0].getSelectionModel().getSelection();
 Ext.each(gridSelected, function (value) {
 //something
 }

Below is the inline code:

Ext.onReady(function() {
var locationStore = Ext.create('Ext.data.Store', {
    fields: ['id', 'location', 'check'],
    proxy: {
        type: 'memory'
    },
    data: [{
        id: 1,
        location: 'location 1',
        check: false
    }, {
        id: 2,
        location: 'location 2',
        check: false
    }, {
        id: 3,
        location: 'location 3',
        check: false
    }, {
        id: 4,
        location: 'location 4',
        check: false
    }, {
        id: 5,
        location: 'location 5',
        check: false
    }]
});

 var locationStore2 = Ext.create('Ext.data.Store', {
    fields: ['id', 'location', 'check'],
    proxy: {
        type: 'memory'
    },
    data: [{
        id: 1,
        location: 'location 1',
        check: false
    }, {
        id: 2,
        location: 'location 2',
        check: false
    }, {
        id: 3,
        location: 'location 3',
        check: false
    }, {
        id: 4,
        location: 'location 4',
        check: false
    }, {
        id: 5,
        location: 'location 5',
        check: false
    }]
});

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    xtype: 'panel1',
    height: 200,
    width: 350,
    store: locationStore,
    columns: [{
        text: 'ID',
        dataIndex: 'id'
    }, {
        text: 'Location',
        dataIndex: 'location',
        flex: 1,

    },{
            xtype: 'checkcolumn',
            header: 'Check',
            dataIndex: 'check',
            width: 90,
            listeners: {
                checkchange: function (column, recordIndex, checked) {
                var view = panel2.getView(),
                record = view.getRecord(view.getNode(recordIndex));
                var p1ID = record.get('id');
                var p1Check = checked;
                    Ext.each(locationStore2.data.items, function (value)
                             {
                                var p2ID = value.data.id;
                                var p2Check = value.data.check;

                                 if (p1ID == p2ID){
                                 //here we output the results and you could also do something here.
                                 console.log(p1ID, p1Check, p2ID, p2Check);
                                 }
                             })   

            }
        }
    }]
});

   var panel2 =  Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    xtype: 'panel2',
    height: 200,
    width: 350,
    store: locationStore2,
    columns: [{
        text: 'ID',
        dataIndex: 'id'
    }, {
        text: 'Location',
        dataIndex: 'location',
        flex: 1,

    },{
            xtype: 'checkcolumn',
            header: 'Check',
            dataIndex: 'check',
            width: 90,
            listeners: {
                checkchange: function (column, recordIndex, checked) {
                var view = panel2.getView(),
                record = view.getRecord(view.getNode(recordIndex));
                console.log(record.get('id'));

            }
        }
        }]
});



});