EXTJS - 带有复选框模型的2个网格 - 如果选中其他网格中的相应复选框,则禁用一个网格中的复选框?

时间:2014-06-24 17:14:46

标签: extjs

我有两个具有相同记录但不同商店的网格。

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

我知道我可以先听#34;然后选择"在任一网格上的事件,例如网格A,但那么我将如何得到"网格B的记录?一旦我有了recs,我可以检查它是否被选中,然后我可以通过简单地返回true / false来启用/禁用其他网格的复选框。

谢谢

2 个答案:

答案 0 :(得分:2)

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

示例中的面板1是您可以检查的面板,它将返回Panel1的值并将它们与Panel2进行比较,并说明两者的检查值。然后你可以做任何你想做的事。

如果你做了选择模型路线,你会在控制器中放置一个改变功能,而在函数中只需执行以下操作:

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

            }
        }
        }]
});



});

答案 1 :(得分:1)

谢谢你的回答杰西。我想出了这个,实际上非常简单。我在选择"之前选择"控制器中两个网格上的事件:

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

因此,如果我在gridA上进行选择,for循环将检查是否已选择gridB中的相应列。如果选中它,它将在gridBSelections数组中,因此gridA NAME将等于gridB NAME(两个网格上的NAME列共享相同的值),所以我返回false;

当然,gridB的处理程序将完全相同但具有相反的值.`

将此作为另一个解决方案发布给任何有相同问题的人。

THX