Question

我有一个EXT JS 4.2网格5列，它在最左边有一个正常的选择复选框，在倒数第二列有一个额外的复选框，在最后一列有一个收音机。

如果我单击并在选择列中选择一行，则转到单击“主要”单选按钮或“完整”复选框，它将取消选择该行上已选择的任何内容。例如，如果我选择第1行，然后单击要取消选择的主要广播，然后如果我单击“完全”，它将取消选择“广播”。然后，如果再次单击Radio，然后单击Full，它们将保持选中状态。

似乎第二次选中复选框或收音机后它开始正常运行，不确定为什么会出现这种情况或如何纠正它。

我尝试添加checkOnly：true paramater，但似乎没有做任何不同的事情。

enter image description here

以下是Grid的代码：

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.selection.CheckboxModel'
]);

Ext.onReady(function(){

    Ext.QuickTips.init();

    // Data store
    var data =  Ext.create('Ext.data.JsonStore', {
        autoLoad: true,
        fields: [ 'name', 'market', 'expertise', 'id', 'isFull', 'isPrimary'],
        proxy: {
            type: 'ajax',
            url: '/opsLibrary/getLibraryJson'
        }
    });

    // Selection model
    var selModel = Ext.create('Ext.selection.CheckboxModel', {
        columns: [
            {xtype : 'checkcolumn', text : 'Active', dataIndex : 'id'}
            ],
        checkOnly: true,
        mode: 'multi',
        enableKeyNav: false,
        listeners: {
            selectionchange: function(value, meta, record, row, rowIndex, colIndex){
                var selectedRecords = grid4.getSelectionModel().getSelection();
                var selectedParams = [];

                // Clear input and reset vars
                $('#selected-libraries').empty();
                var record = null;
                var isFull = null;
                var isPrimary = null;

                // Loop through selected records
                for(var i = 0, len = selectedRecords.length; i < len; i++){
                    record = selectedRecords[i];

                    // Is full library checked?
                    isFull = record.get('isFull');

                    // Is this primary library?
                    isPrimary = record.get('isPrimary');

                    // Build data object
                    selectedParams.push({
                        id: record.getId(),
                        full: isFull,
                        primary: isPrimary
                    });
                }
                // JSON encode object and set hidden input
                $('#selected-libraries').val(JSON.stringify(selectedParams));
                console.log(JSON.stringify(selectedParams));
    }}
    });

    // Render library grid
    var grid4 = Ext.create('Ext.grid.Panel', {
        xtype: 'gridpanel',
        id:'button-grid',
        store: data,
        forceSelection : false,
        autocomplete: false,
        typeAhead: false,
        columns: [
            {text: "Library", width: 170, sortable: true, dataIndex: 'name'},
            {text: "Market", width: 125, sortable: true, dataIndex: 'market'},
            {text: "Expertise", width: 125, sortable: true, dataIndex: 'expertise'},
            {text: 'Full', dataIndex:'isFull', checkOnly: true, width: 72,
                renderer: function (value, meta, record) {
                    return '<center><input type="checkbox" onclick="var s = Ext.getCmp(\'button-grid\').store; s.getAt(s.findExact(\'id\',\'' + record.get('id') + '\')).set(\'isFull\', this.value)"'
                }},
            {text: 'Primary', dataIndex:'isPrimary', checkOnly: true, width: 72,
                renderer: function(value, meta, record)
                {
                    return '<center><input type="radio" onclick="var s = Ext.getCmp(\'button-grid\').store; s.getAt(s.findExact(\'id\',\'' + record.get('id') + '\')).set(\'isPrimary\', this.value)"'
                }},
        ],
        columnLines: false,
        selModel: selModel,
        width: 600,
        height: 300,
        frame: true,
        title: 'Available Libraries',
        iconCls: 'icon-grid',
        renderTo: Ext.get('library-grid')
    });
});

任何帮助都将非常感谢....

谢谢！

Answer 1

我认为问题在于复选框和单选列的渲染函数没有绑定到模型的状态，每次渲染时，框都显示为未选中。如果模型中的值为真，请尝试在渲染函数中将“已检查”属性添加到框中，例如：

return '<center><input type="checkbox" ' + (value ? 'checked' : '') + ' onclick=.....

这应该至少为功能带来一致性。

具有多个复选框的EXT网格 - 选择项目取消选择另一个

1 个答案: