Question

我有一个EXT JS 4.2 Grid，有2列使用渲染器将复选框放在1列中，单选按钮放在另一列中。如何在这些HTML输入上自动增加ID，以便我可以通过EXT JS专门定位它们（参见列'完整'和'主要'）

    // 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', renderer: function() {
            var rec = grid4.getStore().getAt(this.rowIndex);
            return "<input type='checkbox' id='"+rec+"' />";
        }},
        {text: 'Primary', dataIndex:'isPrimary', renderer: function() {
            return "<input type='radio' />";
        }},
    ],

    columnLines: false,
    selModel: selModel,

    // inline buttons
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        ui: 'footer',
        layout: {
            pack: 'center'
        },
        items: []
    }, {
        xtype: 'toolbar',
        items: []
    }],

    width: 600,
    height: 300,
    frame: true,
    title: 'Available Libraries',
    iconCls: 'icon-grid',
    renderTo: Ext.get('library-grid')
});

更新 ID正在递增，谢谢！

现在，我还有一个问题：当我检查EXT网格中的项目时，我没有看到已设置checked：checked标志，我将如何执行类似下面的代码。我想检查是否检查了元素

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

Answer 1

renderer自动获取一堆参数，其中一个是rowIndex。您应该能够提供所需的唯一ID：

{
    text: 'Full', 
    dataIndex:'isFull', 
    renderer: function(value, meta, record, rowIndex, colIndex) 
    {
        return '<input type="checkbox" id="isFull-' + rowIndex + '" />';
    }
}

在此处查看更多内容：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Column-cfg-renderer

EXT JS Grid - 自动递增渲染输入

1 个答案: