2

私は EXT JS 4.2 グリッド 5 列を持っています。左端に通常の選択チェックボックスがあり、最後から 2 番目の列に追加のチェックボックスがあり、最後の列にラジオがあります。

選択列の行をクリックして選択すると、[プライマリ] ラジオまたは [フル] チェックボックスをクリックすると、その行で既に選択されているものはすべて選択解除されます。たとえば、行 1 を選択してプライマリ ラジオをクリックすると選択が解除され、[フル] をクリックするとラジオが選択解除されます。次に、ラジオをもう一度クリックしてからフルをクリックすると、選択されたままになります。

チェックボックスまたはラジオをもう一度選択すると、正常に動作し始めるように見えますが、この動作が発生する理由や修正方法がわかりません。

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