Extjs checkcolumn ext js_Extjs - Fatal编程技术网

Extjs checkcolumn ext js

extjs

Extjs checkcolumn ext js,extjs,Extjs,我有一个字段集，其中包含一个网格，该网格有3个检查列：Leader、Member和Viewer。如果用户单击“领导”复选框列中的复选框，则应禁用“成员”和“查看器”复选框列中的相应复选框（即，用户不能单击这些复选框）。如果用户单击成员或查看器检查列中的复选框，则情况也是如此；其他复选框不应可单击。有什么办法吗？RadioGroup不可行，因为应用程序需要允许用户选中多个复选框（在复选框列中）。我已经部分解决了这个问题：现在，如果单击“引线检查”列中的任何复选框，然后单击“查看器”或“成员检查”列

我有一个字段集，其中包含一个网格，该网格有3个检查列：Leader、Member和Viewer。如果用户单击“领导”复选框列中的复选框，则应禁用“成员”和“查看器”复选框列中的相应复选框（即，用户不能单击这些复选框）。如果用户单击成员或查看器检查列中的复选框，则情况也是如此；其他复选框不应可单击。有什么办法吗？

RadioGroup不可行，因为应用程序需要允许用户选中多个复选框（在复选框列中）。我已经部分解决了这个问题：现在，如果单击“引线检查”列中的任何复选框，然后单击“查看器”或“成员检查”列中的复选框，则引线检查列中的勾号将消失。唯一的问题是，当前如果用户单击“成员”或“查看器”复选框列中的任何复选框，则“引线”复选框列中的任何复选框都将被取消选中。但是，我只希望取消选中相应的复选框（即同一行中的复选框）。以下是checkcolumns、包含checkcolumns和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()
});


setConfig（{enabled:true，路径：{'Ext.ux'：'Ext/js/ux'}}）；
//setPath（'Ext.ux'，'Ext/js/ux'）；
外部要求([
“Ext.grid.*”，
“Ext.data.*”，
“Ext.ux.grid.HeaderToolTip”，
“Ext.ux.CheckColumn”
]);
Ext.onReady（函数（）{
Ext.tip.QuickTipManager.init（）；
var teststore=Ext.create（'Ext.data.ArrayStore'{
字段：[
{name:'UserID'，键入：'asUCString'}，
{name:'name'，键入：'asUCString'}，
{name:'Role'，type:'asUCString'}，
{name:'Leader'，键入：'bool'}，
{name:'Member'，键入：'bool'}，
{name:'Viewer'，键入：'bool'}
],
数据：[
['1'、'Hans Hansel'、'客户/自由职业者'，假，假，假]，
[2'，Doreen Duck'，Consultant'，false，false，false]，
['3'，'Gerald Goose'，'Client'，false，false，false]，
['4'，'弗雷德里克·菲茨杰拉德'，'超级用户IT'，假，假，假]，
[5'，'Aimee Anselm'，'Administrator'，false，false，false]
]
});
var grid=Ext.create（'Ext.grid.Panel'{
id:'setPermissionsGrid'，
标题：“”，
商店：teststore，
插件：['headertooltip']，
栏目：[
{文本：'Name'，数据索引：'Name'，宽度：120}，
{文本：“角色”，数据索引：“角色”，宽度：125}，
{text:'Leader'，dataIndex:'Leader'，xtype:'checkcolumn'，侦听器：{checkchange'：function（）{for（teststore.data.items）{teststore.data.items[i]。set（'Member'，false）；teststore.data.items[i]。set（'Viewer'，false）}，宽度：68，工具提示：'引线}，
{text:'Member'，dataIndex:'Member'，xtype:'checkcolumn'，侦听器：{'checkchange'：function（）{for（teststore.data.items中的变量i）{teststore.data.items[i]。set（'Leader'，false）；teststore.data.items[i]。set（'Viewer'，false）；}}，宽度：68，工具提示：'Member'}，
{text:'Viewer'，dataIndex:'Viewer'，xtype:'checkcolumn'，侦听器：{'checkchange'：function（）{for（teststore.data.items中的变量i）{teststore.data.items[i]。set（'Leader'，false）；teststore.data.items[i]。set（'Member'，false）；}}，宽度：68，工具提示：'Viewer}
],
身高：219，
宽度：450，
renderTo:Ext.getBody（）
});

我使用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()

Ext.Loader.setConfig（{enabled:true，路径：{'Ext.ux'：'Ext/js/ux'}}）；
外部要求([
“Ext.grid.*”，
“Ext.data.*”，
“Ext.ux.grid.HeaderToolTip”，
“Ext.ux.CheckColumn”
]);
Ext.onReady（函数（）{
Ext.tip.QuickTipManager.init（）；
var teststore=Ext.create（'Ext.data.ArrayStore'{
字段：[
{name:'UserID'，键入：'asUCString'}，
{name:'name'，键入：'asUCString'}，
{name:'Role'，type:'asUCString'}，
{name:'Leader'，键入：'bool'}，
{name:'Member'，键入：'bool'}，
{name:'Viewer'，键入：'bool'}
],
数据：[
['1'、'Hans Hansel'、'客户/自由职业者'，假，假，假]，
[2'，Doreen Duck'，Consultant'，false，false，false]，
['3'，'Gerald Goose'，'Client'，false，false，false]，
['4'，'弗雷德里克·菲茨杰拉德'，'超级用户IT'，假，假，假]，
[5'，'Aimee Anselm'，'Administrator'，false，false，false]
]
});
var grid=Ext.create（'Ext.grid.Panel'{
id:'setPermissionsGrid'，
标题：“”，
store:teststore，//Ext.data.StoreManager.lookup（'SimpsonStore'），
插件：['headertooltip']，
//selType:'checkboxmodel'，
栏目：[
{文本：'Name'，数据索引：'Name'，宽度：120}，
{文本：“角色”，数据索引：“角色”，宽度：125}，
{text:'Leader'，dataIndex:'Leader'，xtype:'checkcolumn'，侦听器：{'checkchange'：函数（列，记录索引，选中）{var record=teststore.getAt（记录索引）；record.set（'Member'，false）；record.set（'Viewer'，false）；}，宽度：68，工具提示：'Team Leader Rights:'}，
{text:'Member'，dataIndex:'Member'，xtype:'checkcolumn'，侦听器：{'checkchange'：函数（列，记录索引，选中）{var record=teststore.getAt（记录索引）；record.set（'Leader'，false）；record.set（'Viewer'，false）；}，宽度：68，工具提示：'Team Member Rights:'}，
{text:'Viewer'，dataIndex:'Viewer'，xtype:'checkcolumn'，侦听器：{'checkchange'：函数（列，记录索引，选中）{var record=teststore.getAt（记录索引）；record.set（'Leader'，false）；record.set（'Member'，false）；}，宽度：68，工具提示：'Team Viewer Rights:'}
],
身高：219，
宽度：450，
renderTo:Ext.getBody（）