Question

我有一个EXT网格，在使用渲染器的最后两列中有一个额外的复选框和无线电。当我检查网格中的项目并查看源代码时，我没有在HTML中看到已检查：已检查的名称，因此我很难定位该元素。

当选择一行时，我希望能够检查复选框是否已选中，我正在执行以下操作：

if (document.getElementById("#isFull-"+record['index']+"").checked == true){
    var myVar = true;
}

我是否有另一种方法可以定位此元素以查看它是否已被检查？

以下是完整代码：

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'
        }],
        listeners: {
            selectionchange: function (value, meta, record, rowIndex, colIndex) {
                var selectedRecords = grid4.getSelectionModel().getSelection();
                var selectedParams = [];

                // Clear hidden input
                $('#selected-libraries').empty();
                var record = null;
                var myVar = null;
                var myVar2 = null;

                for (var i = 0, len = selectedRecords.length; i < len; i++) {
                    record = selectedRecords[i];

                    // Is full library checked?
                    myVar = !Ext.fly("isFull-" + data.indexOf(record)).dom.checked;

                    // Build data object
                    selectedParams.push({
                        id: record.getId(),
                        full: myVar

                    });
                }
                // 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,
        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',
            width: 72,
            renderer: function (value, meta, record, rowIndex, colIndex) {
                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',
            width: 72,
            renderer: function (value, meta, record, rowIndex, colIndex) {
                return '<center><input type="radio" id="isPrimary-' + rowIndex + '"/></center>';
            }
        }, ],
        columnLines: false,
        selModel: selModel,
        width: 600,
        height: 300,
        frame: true,
        title: 'Available Libraries',
        iconCls: 'icon-grid',
        renderTo: Ext.get('library-grid')
    });
});

更新选择模型：

// Selection model
var selModel = Ext.create('Ext.selection.CheckboxModel', {
    columns: [{
        xtype: 'checkcolumn',
        text: 'Active',
        dataIndex: 'id'
    }],
    listeners: {
        selectionchange: function (value, meta, record, rowIndex, colIndex) {
            var selectedRecords = grid4.getSelectionModel().getSelection();
            var LastSelectedRecords = grid4.getSelectionModel().getLastSelected();
            var selectedParams = [];

            // If user unselected ID then make sure Full & Primary boxes cleared
            if (grid4.getSelectionModel().getSelection() == "") {
                // Get row ID
                Ext.fly('isFull-' + LastSelectedRecords['index']).dom.checked = false;
                Ext.fly('isPrimary-' + LastSelectedRecords['index']).dom.checked = false;
            }

            // Clear input and reset vars
            $('#selected-libraries').empty();
            var record = null;
            var myVar = null;
            var myVar2 = null;

            // Loop through selected records
            for (var i = 0, len = selectedRecords.length; i < len; i++) {
                record = selectedRecords[i];

                // Is full library checked?
                myVar = record.get('isFull');

                // Is this primary library?
                myVar2 = record.get('isPrimary');

                // Build data object
                selectedParams.push({
                    id: record.getId(),
                    full: myVar,
                    primary: myVar2
                });
            }
            // JSON encode object and set hidden input
            $('#selected-libraries').val(JSON.stringify(selectedParams));
            console.log(JSON.stringify(selectedParams));
        }
    }
});

Answer 1

使用get()函数访问记录中的数据，而不是对象表示法：

if (document.getElementById("isFull-"+record.get('index')).checked == true)
{
    var myVar = true;
}

其他几点...你正在使用== true检查真值，对于任何“真值”都会返回真值。如果您要检查它是否等于===，则需要使用true。

此外，您可能需要考虑Ext.fly()来获取您的元素，它更加友好：

if (Ext.fly("isFull-"+record.get('index')).dom.checked === true)
{
    var myVar = true;
}

为简单起见，您甚至可以这样做：

var myVar = Ext.fly("isFull-"+record.get('index')).dom.checked;

修改

我的印象是你有index作为你的商店领域之一，但我注意到它不是。您需要使用store.indexOf(record)来获取所需的索引：

var myVar = Ext.fly("isFull-" + data.indexOf(record)).dom.checked;

Answer 2

让我们尝试一种不同的方法。如果您将检查列设置为执行以下操作会怎样：

{
    text: 'Full',
    dataIndex:'isFull',
    width: 70,
    renderer: function (value, meta, record, rowIndex, colIndex) {
        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)" /></center>';
    }
},

这应该将值直接设置到记录中。

Answer 3

也许，你可以在网格视图上使用一个监听器：

Sencha api [4.2]：Listeners on grid/columns

 listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ 
                 console.log('click el'); 
            }
        },

EXTJS - 如何在网格中定位渲染的复选框输入

3 个答案: