Question

我有一个EXT JS 4.2 Grid 5列，2个最右边的列（1个复选框和1个收音机）不是EXT选择模型的一部分但是当检查其中一个项目时我希望选择复选框最左边总是默认选中。

现在在我的网格中，如果我选择“完整”或“主要”，默认情况下不会选中主选择复选框，我希望尽可能。

这是我的网格： enter image description here

这是我的代码：

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'
    },
    sorters: [{
        property: 'market',
        direction: 'ASC'
    }, {
        property: 'expertise',
        direction: 'ASC'
    }]
});

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

// 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', stopSelection: false, width: 72,
            renderer: function (value, meta, record) {
                return '<center><input type="checkbox" name="checkbox"' + (value ? 'checked' : '') + ' onclick="var s = Ext.getCmp(\'button-grid\').store; s.getAt(s.findExact(\'id\',\'' + record.get('id') + '\')).set(\'isFull\', this.value)"'
            }},
        {text: 'Primary', dataIndex:'isPrimary', stopSelection: false, width: 72,
            renderer: function(value, meta, record)
            {
                return '<center><input type="radio" name="radio" ' + (value ? 'checked' : '') + ' 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

你必须破解你的黑客...

以下是您要求“完整”列的代码：

{text: 'Full', dataIndex:'isFull', stopSelection: false, width: 72,
    renderer: function (value, meta, record) {
        return '<center><input type="checkbox" name="checkbox"' + (value ? 'checked' : '')
            + ' onclick="'
            + 'var g = Ext.getCmp(\'button-grid\'), s = g.store, r = s.getAt(s.findExact(\'id\',\'' + record.get('id') + '\'));'
            + 'r.set(\'isFull\', this.value); '
            + 'g.getSelectionModel().select(r, true)' // second argument is keepExisting
            + '"';
}},

我已经说过了，但是使用常规CheckColumn和RadioColumn可以让您处理事件，并为您节省这种麻烦......

修改固定代码：

{text: 'Full', dataIndex:'isFull', stopSelection: false, width: 72,
    renderer: function (value, meta, record) {
        return '<center><input type="checkbox" name="checkbox"' + (value ? 'checked' : '')
            + ' onclick="'
            + 'var g = Ext.getCmp(\'button-grid\'), s = g.store, r = s.getAt(s.findExact(\'id\',\'' + record.get('id') + '\'));'

            // changed this.value to this.checked
            + 'r.set(\'isFull\', this.checked); '

            // selecting the row only if the checkbox is being checked -- not if it is unchecked
            + 'if (this.checked) g.getSelectionModel().select(r, true);' // second argument is keepExisting

            // you'll probably want to use a custom method in your grid, instead of the selectionchangeevent (see bellow)
            + 'g.notifySelectionChange();'

            // closed the tags, one never knows...
            + '" /></center>';
    }}

如上面的评论所述，您可能希望使用自定义方法，而不是依赖于selectionchange事件。原因是当取消选中“完整”复选框时，不会触发此事件。我们可以自己模拟事件的触发，但这对于依赖于此事件的任何现有或可能的代码都是非常危险的...自定义方法是安全的，我们可以完全控制它：）

只需将其添加到您的网格中：

var grid4 = Ext.create('Ext.grid.Panel', {

    // ...

    notifySelectionChange: function() {
        // move the content of your listener here
    }
});

EXT JS 4.2网格 - 自动检查选择模型复选框

1 个答案: