EXT Сетка с несколькими флажками - выбор пункта отменяет выбор еще

Question

У меня есть столбец EXT JS 4.2 grid 5, он имеет флажок обычного выбора в крайнем левом углу, а также дополнительный флажок в столбце от второго до последнего и радио в последнем колонка.

Если я нажимаю и выбираю строку в столбце выбора, переходим к флажку «Первичный» или «Полный», он отменяет выбор того, что уже выбрано в этой строке. Например, если я выберу строку 1, затем перейдите в основное первичное радио, которое будет отменено, тогда, если я нажму на «Полно», он отменит выбор радио. Затем, если снова нажмите Радио, а затем «Полный», они останутся выбранными.

Кажется, что после того, как флажок или радио выбраны во второй раз, он начинает действовать нормально, не зная, почему это поведение происходит или как его исправить.

Я попытался добавить checkOnly: true paramater, но это, казалось, ничего не делало.

Вот код для сетки:

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=..... 

Это должно привести последовательность в функциональности, по крайней мере.