CODEWITHSUNDEEP
extjs
anitacynax
anitacynax

Reputation: 255

checkcolumn ext js

I have a fieldset that contains a grid which has 3 checkcolumns: Leader, Member and Viewer. If a user clicks on a checkbox in the Leader checkcolumn, then the corresponding checkboxes in the Member and Viewer checkcolumns should be disabled (i.e. the user should not be able to click on these checkboxes). The same goes for if the user clicks on a checkbox in the Member or Viewer checkcolumns; the other checkboxes should not be clickable. Any ideas how to go about this?

Upvotes: 0

Views: 2626

Answers (2)

Anita
Anita

Reputation: 21

I was able to solve this using record.set. My code is as follows:

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()

Upvotes: 1

Anita
Anita

Reputation: 21

RadioGroup is not feasible as the application needs to allow more than one checkbox (in a checkcolumn) to be checked by the user. I have partially solved this problem: right now if I click any checkbox in the Leader checkcolumn and then click either a checkbox in the Viewer or the Member checkcolumns, the tick mark in the Leader checkcolumn disappears. The only problem is that currently if the user clicks on ANY checkbox in the Member or Viewer checkcolumn then any checked checkboxes in the Leader checkcolumn become unchecked. However, I want only the CORRESPONDING checkbox(es) (i.e. the one in the same row) to be unchecked. Here is the code for the checkcolumns, the grid that contains the checkcolumns and the store:

<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()
});

Upvotes: 1

Related Questions