checkcolumn ext js

我有一個fieldset包含一個有3個checkcolumns的網格：Leader，Member和Viewer。如果用戶點擊領導者檢查列中的複選框，則應禁用成員和查看者檢查列中的相應複選框（即，用戶不應該能夠點擊這些複選框）。如果用戶點擊成員或查看器checkcolumns中的複選框，也是如此;其他複選框不應該是可點擊的。任何想法如何去做這件事？checkcolumn ext js

來源

2012-11-02 anitacynax

您是否嘗試過使用RadioGroup？ http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.RadioGroup – Patton

RadioGroup不可行，因爲應用程序需要允許用戶檢查多個複選框（在checkcolumn中）。我已經部分解決了這個問題：現在，如果我點擊領導者checkcolumn中的任何複選框，然後單擊Viewer或Member checkcolumns中的複選框，領導者checkcolumn中的勾號消失。唯一的問題是，如果用戶點擊成員或查看器檢查列中的ANY複選框，那麼領導者檢查列中的任何選中的複選框將被取消選中。但是，我只想要取消選中相應複選框（即同一行中的那個複選框）。這裏是checkcolumns的代碼，包含checkcolumns和商店的網格：

<html> 

<head> 
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> 
    <link rel="stylesheet" type="text/css" href="ext/js/ux/css/CheckHeader.css" /> 
    <script type="text/javascript" src="ext/js/bootstrap.js"></script> 
</head> 

<body> 

    <script type="text/javascript"> 
    Ext.Loader.setConfig({enabled: true, paths:{'Ext.ux': 'ext/js/ux'}}); 

    //Ext.Loader.setPath('Ext.ux', 'ext/js/ux'); 

    Ext.require([ 
     'Ext.grid.*', 
     'Ext.data.*', 
     'Ext.ux.grid.HeaderToolTip', 
     'Ext.ux.CheckColumn' 
    ]); 

    Ext.onReady(function() { 

    Ext.tip.QuickTipManager.init(); 

    var teststore = Ext.create('Ext.data.ArrayStore', { 
     fields: [ 
      {name: 'UserID', type: 'asUCString'}, 
      {name: 'Name', type: 'asUCString'}, 
      {name: 'Role', type: 'asUCString'}, 
      {name: 'Leader', type: 'bool'}, 
      {name: 'Member', type: 'bool'}, 
      {name: 'Viewer', type: 'bool'} 
     ], 
     data: [ 
      ['1', 'Hans Hansel', 'Customer/Freelancer', false, false, false], 
      ['2', 'Doreen Duck', 'Consultant', false, false, false], 
      ['3', 'Gerald Goose', 'Client', false, false, false], 
      ['4', 'Frederic Fitzgerald', 'Super User IT', false, false, false], 
      ['5', 'Aimee Anselm', 'Administrator', false, false, false] 
     ] 
    }); 

var grid = Ext.create('Ext.grid.Panel', { 
    id: 'setPermissionsGrid', 
    title: '', 
     store: teststore, 
     plugins: ['headertooltip'], 
     columns: [ 
      { text: 'Name', dataIndex: 'Name', width: 120}, 
      { text: 'Role', dataIndex: 'Role', width: 125}, 
      { text: 'Leader', dataIndex: 'Leader', xtype: 'checkcolumn', listeners: {'checkchange' : function() {for (var i in teststore.data.items) {teststore.data.items[i].set('Member', false); teststore.data.items[i].set('Viewer', false);}} },width: 68, tooltip: 'Leader'}, 
      { text: 'Member', dataIndex: 'Member', xtype: 'checkcolumn', listeners: {'checkchange' : function() {for (var i in teststore.data.items) {teststore.data.items[i].set('Leader', false); teststore.data.items[i].set('Viewer', false);}} },width: 68, tooltip: 'Member'}, 
      { text: 'Viewer', dataIndex: 'Viewer', xtype: 'checkcolumn', listeners: {'checkchange' : function() {for (var i in teststore.data.items) {teststore.data.items[i].set('Leader', false); teststore.data.items[i].set('Member', false);}} },width: 68, tooltip: 'Viewer'} 
     ], 
     height: 219, 
     width: 450, 
     renderTo: Ext.getBody() 
});

來源

2012-11-09 15:26:50 Anita

我能用record.set解決這個問題。我的代碼如下：

Ext.Loader.setConfig({enabled: true, paths:{'Ext.ux': 'ext/js/ux'}}); 

    Ext.require([ 
     'Ext.grid.*', 
     'Ext.data.*', 
     'Ext.ux.grid.HeaderToolTip', 
     'Ext.ux.CheckColumn' 
    ]); 

    Ext.onReady(function() { 

    Ext.tip.QuickTipManager.init(); 

    var teststore = Ext.create('Ext.data.ArrayStore', { 
     fields: [ 
      {name: 'UserID', type: 'asUCString'}, 
      {name: 'Name', type: 'asUCString'}, 
      {name: 'Role', type: 'asUCString'}, 
      {name: 'Leader', type: 'bool'}, 
      {name: 'Member', type: 'bool'}, 
      {name: 'Viewer', type: 'bool'} 
     ], 
     data: [ 
      ['1', 'Hans Hansel', 'Customer/Freelancer', false, false, false], 
      ['2', 'Doreen Duck', 'Consultant', false, false, false], 
      ['3', 'Gerald Goose', 'Client', false, false, false], 
      ['4', 'Frederic Fitzgerald', 'Super User IT', false, false, false], 
      ['5', 'Aimee Anselm', 'Administrator', false, false, false] 
     ] 
    }); 


    var grid = Ext.create('Ext.grid.Panel', { 
     id: 'setPermissionsGrid', 
     title: '', 
     store: teststore, //Ext.data.StoreManager.lookup('simpsonsStore'), 
     plugins: ['headertooltip'], 
     //selType: 'checkboxmodel', 
     columns: [ 
      { text: 'Name', dataIndex: 'Name', width: 120}, 
      { text: 'Role', dataIndex: 'Role', width: 125}, 
      { text: 'Leader', dataIndex: 'Leader', xtype: 'checkcolumn', listeners: {'checkchange' : function(column, recordIndex, checked) {var record = teststore.getAt(recordIndex); record.set('Member', false); record.set('Viewer', false); }},width: 68, tooltip: '<b>Team Leader Rights:</b> '}, 
      { text: 'Member', dataIndex: 'Member', xtype: 'checkcolumn', listeners: {'checkchange' : function(column, recordIndex, checked) {var record = teststore.getAt(recordIndex); record.set('Leader', false); record.set('Viewer', false); }},width: 68, tooltip: '<b>Team Member Rights:</b> '}, 
      { text: 'Viewer', dataIndex: 'Viewer', xtype: 'checkcolumn', listeners: {'checkchange' : function(column, recordIndex, checked) {var record = teststore.getAt(recordIndex); record.set('Leader', false); record.set('Member', false); }},width: 68, tooltip: '<b>Team Viewer Rights:</b> '} 

     ], 
     height: 219, 
     width: 450, 
     renderTo: Ext.getBody()

來源

2012-11-12 14:07:43 Anita

checkcolumn ext js

回答

相關問題