EXTJS - 2帶複選框模型的網格 - 如果選中其他網格中的相應複選框，則禁用一個網格中的複選框？

Question

我有兩個網格有相同的記錄，但不同的商店。

基本上，如果在網格中選擇記錄中的一個，我想禁用記錄A複選框電網B.

我知道我可以聽在任電網「beforeselect」事件，例如網格中的，但那麼我將如何「從網格B」獲取記錄？一旦我有了recs，我可以檢查它是否被選中，然後我可以通過簡單地返回true/false來啓用/禁用其他網格的複選框。

謝謝

Answer 1

好吧，我最後做一個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')); 

      } 
     } 
     }] 
}); 



}); 

Answer 2

謝謝爲了你的回答傑西。我想出了這個，其實很簡單。我聽了兩個網格在控制器中的「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; 
    } 
    } 
} 

所以，如果我去做出gri​​dA選擇，for循環會檢查，看看是否在gridB其相應的列已被選中。如果選中它，它將位於gridBSelections數組中，因此gridA NAME將等於gridB NAME（兩個網格上的名稱列共享相同的值），所以我返回false;

當然

，處理程序gridB將是完全相同的，但具有相反values.``

登載作爲具有相同的概率任何另一種解決方案。

thx