EXTJS-2带有复选框模型的网格——如果选中了另一个网格中相应的复选框，则在一个网格中禁用复选框？

我有两个相同记录但不同存储的网格

基本上，如果在网格A中选择了记录A，我想禁用网格B中记录A的复选框

我知道我可以在任一网格（例如网格A）上侦听“beforeselect”事件，但是如何从网格B“获取”记录呢？一旦我有了REC，我可以检查它是否被选中，然后我可以通过简单地返回true/false来启用/禁用其他网格的复选框

---

谢谢

好的，我最后做了一个checkcolumn，因为它更容易在行代码中完成。您可以将此代码放到fiddle.sencha.com中，它将起作用

示例中的Panel 1是您可以检查的，它将返回Panel 1的值，并将其与Panel 2进行比较，并说明两者上的检查值是否相同。然后你可以做任何你想做的事

如果您选择了模型路线，您将在控制器中放置一个更改功能，并在该功能中执行如下操作：

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

以下是内联代码：

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'));

            }
        }
        }]
});



});

---

好的，我最后做了一个checkcolumn，因为它更容易在行代码中完成。您可以将此代码放到fiddle.sencha.com中，它将起作用

示例中的Panel 1是您可以检查的，它将返回Panel 1的值，并将其与Panel 2进行比较，并说明两者上的检查值是否相同。然后你可以做任何你想做的事

如果您选择了模型路线，您将在控制器中放置一个更改功能，并在该功能中执行如下操作：

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

以下是内联代码：

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'));

            }
        }
        }]
});



});

---

好的，我最后做了一个checkcolumn，因为它更容易在行代码中完成。您可以将此代码放到fiddle.sencha.com中，它将起作用

示例中的Panel 1是您可以检查的，它将返回Panel 1的值，并将其与Panel 2进行比较，并说明两者上的检查值是否相同。然后你可以做任何你想做的事

如果您选择了模型路线，您将在控制器中放置一个更改功能，并在该功能中执行如下操作：

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

以下是内联代码：

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'));

            }
        }
        }]
});



});

---

好的，我最后做了一个checkcolumn，因为它更容易在行代码中完成。您可以将此代码放到fiddle.sencha.com中，它将起作用

示例中的Panel 1是您可以检查的，它将返回Panel 1的值，并将其与Panel 2进行比较，并说明两者上的检查值是否相同。然后你可以做任何你想做的事

如果您选择了模型路线，您将在控制器中放置一个更改功能，并在该功能中执行如下操作：

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

以下是内联代码：

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'));

            }
        }
        }]
});



});

---

谢谢你的回答，杰西。我想出了这个，其实很简单。我在控制器的两个网格上收听了“beforeselect”事件：

//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;
    }
  }
}

//beforeselect处理程序
gridAHandler:函数（grid，rec）{
var gridBSelections=this.getGridB（）.getSelectionModel（）.getSelection（）；
对于（var i=0；i谢谢你的回答Jesse。我想到了这个，其实很简单。我在controller中的两个网格上都听了“beforeselect”事件：

//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;
    }
  }
}

//beforeselect处理程序
gridAHandler:函数（grid，rec）{
var gridBSelections=this.getGridB（）.getSelectionModel（）.getSelection（）；
对于（var i=0；i谢谢你的回答Jesse。我想到了这个，其实很简单。我在controller中的两个网格上都听了“beforeselect”事件：

//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;
    }
  }
}

//beforeselect处理程序
gridAHandler:函数（grid，rec）{
var gridBSelections=this.getGridB（）.getSelectionModel（）.getSelection（）；
对于（var i=0；i谢谢你的回答Jesse。我想到了这个，其实很简单。我在controller中的两个网格上都听了“beforeselect”事件：

//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;
    }
  }
}

//beforeselect处理程序
gridAHandler:函数（grid，rec）{
var gridBSelections=this.getGridB（）.getSelectionModel（）.getSelection（）；
对于（var i=0；i是否在每个网格中使用Ext.selection.CheckboxModel，然后尝试比较两者？@JesseRules是的，没错。是否在每个网格中使用Ext.selection.CheckboxModel，然后尝试比较两者？@JesseRules是的，没错。是否在每个网格中使用Ext.selection.CheckboxModel，然后尝试比较两者？@JesseRule是的，没错。你是否在每个网格中使用Ext.selection.CheckboxModel，然后尝试比较两者？@JesseRules是的，没错。