2

我有一个 EXT JS 4.2 网格 5 列，它在最左边有一个正常选择复选框，在倒数第二列有一个附加复选框，在最后一列有一个单选框。

如果我单击并选择选择列中的一行，然后单击“主要”单选或“完整”复选框，它将取消选择该行上已选择的任何内容。例如，如果我选择第 1 行，然后单击 Primary Radio，它将取消选择，然后如果我单击 Full，它将取消选择 Radio。然后，如果再次单击收音机，然后单击完整，它们将保持选中状态。

似乎一旦第二次选择复选框或收音机，它就会开始正常运行，不确定为什么会发生这种行为或如何纠正它。

我尝试添加 checkOnly: true 参数，但这似乎没有任何不同。

在此处输入图像描述

这是网格的代码：

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

任何帮助将不胜感激....

谢谢！

4

1 回答 1

1

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

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

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

于 2013-08-15T13:17:35.593 回答