0

リーダー、メンバー、ビューアーの 3 つのチェック列を持つグリッドを含むフィールドセットがあります。ユーザーが Leader チェック列のチェックボックスをクリックした場合、Member および Viewer チェック列の対応するチェックボックスを無効にする必要があります (つまり、ユーザーはこれらのチェックボックスをクリックできないようにする必要があります)。ユーザーがメンバーまたはビューアーのチェック列のチェックボックスをクリックした場合も同様です。他のチェックボックスはクリックできないようにする必要があります。これについてどうすればいいですか？

4

2 に答える 2

1

アプリケーションは、ユーザーが複数のチェックボックス（チェック列内）をチェックできるようにする必要があるため、RadioGroupは実行できません。この問題は部分的に解決しました。現在、[リーダー]チェック列のチェックボックスをクリックしてから、[ビューア]または[メンバー]チェック列のいずれかのチェックボックスをクリックすると、[リーダー]チェック列のチェックマークが消えます。唯一の問題は、現在、ユーザーが[メンバー]または[ビューア]チェックボックスのいずれかのチェックボックスをクリックすると、[リーダー]チェックボックスのチェックボックスがオフになることです。ただし、[対応する]チェックボックス（つまり、同じ行にあるチェックボックス）のみをオフにします。チェックカラム、チェックカラムを含むグリッド、およびストアのコードは次のとおりです。

<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-09T15:26:50.693 に答える
1

これは、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-12T14:07:43.510 に答える