4

我有一个 EXT JS 4.2 Grid 5 列，最右边的 2 个列（1 个复选框和 1 个单选）不是 EXT 选择模型的一部分，但是当其中一个项目被选中时，我想要最左边的选择复选框默认情况下总是被选中。

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

这是我的网格： 在此处输入图像描述

这是我的代码：

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

});

4

1 回答 1

4

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

这是您对“完整”列的要求的代码：

{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和 aRadioColumn可以让您处理事件，并为您省去这种头痛......

编辑固定代码：

{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
    }
});
于 2013-08-21T08:50:28.073 回答