如何在网格 extjs 中正确应用单选按钮？答案

【问题标题】：How can I apply correctly a radio button in a grid extjs?如何在网格 extjs 中正确应用单选按钮？
【发布时间】：2017-12-31 21:21:57
【问题描述】：

我在本地工作。我使用了一个函数来显示网格内的单选按钮，然后我在renderer 中调用了该函数。我知道这是错误的，这只是为了告诉你我想要什么。

我不知道如何将单选按钮应用于每一行。

我使用 extjs 3.4。

对不起我的英语和混乱。

这是数组：

var data_metas =    [['INGRESE META N°1','','','','','','100%','100%'],
                     ['INGRESE META N°2','','','','','','100%','100%'],
                     ['INGRESE META N°3','','','','','','100%','100%']];

这是 ArrayStore：

var store_grid_metas = new Ext.data.ArrayStore({
                  fields: [
                     {name: 'Meta'},
                     {name: '100%'},
                     {name: '75%'},
                     {name: '50%'},
                     {name: '25%'},
                     {name: '0%'},
                     {name: 'Ponderación'},
                     {name: 'Nota final'}
                  ]
});

store_grid_metas.loadData(data_metas);

“radiogrid”功能：

function radiogrid (value) {
return "<input type='radio' name = 'primaryRadioMetaUno' " + (value ? "checked='checked'" : "") + ">";
}

这是网格：

var grid_metas = new Ext.grid.GridPanel({

            store       : store_grid_metas,
            id          : 'grid_metas',
            stripeRows  : true,
            height      :  500,
            width       : '100%',
            autoScroll  : true,
            frame       : true,
            border      : true,
            columnLines : true,
            stateful    : true,
            clicksToEdit: 1,
            items: [{

                                xtype: 'button',
                                itemId: 'btn_guardar_meta',
                                icon: '../../icons/add.png',
                                scale: 'small',
                                text: '<b>INGRESAR METAS</b>',
                                handler: function(){

                                      //modal_agregar_metas();

                                }
                  }],

            columns:[{ 
                      xtype: 'gridcolumn',
                      dataIndex: 'Meta',name: '',
                      header: 'Meta',
                      sortable: true,
                      grupable:true,
                      width: 400,                    
                  },{ 
                      xtype: 'gridcolumn',
                      dataIndex: '100%',name: '',
                      header: '100%',
                      sortable: true,
                      grupable:true,
                      align: 'center',
                      width: 50,
                      renderer : radiogrid               
                  },{ 
                      xtype: 'gridcolumn',
                      dataIndex: '75%',name: '',
                      header: '75%',
                      sortable: true,
                      grupable:true,
                      align: 'center',
                      width: 50,
                      renderer : radiogrid
                  },{ 
                    xtype: 'gridcolumn',
                      dataIndex: '50%',name: '',
                      header: '50%',
                      sortable: true,
                      grupable:true,
                      align: 'center',
                      width: 50,
                      renderer : radiogrid
                  },{ 
                      xtype: 'gridcolumn',
                      dataIndex: '25%',name: '',
                      header: '25%',
                      sortable: true,
                      grupable:true,
                      align: 'center',
                      width: 50,
                      renderer : radiogrid
                  },{ 
                      xtype: 'gridcolumn',
                      dataIndex: '0%',name: '',
                      header: '0%',
                      sortable: true,
                      grupable:true,
                      align: 'center',
                      width: 50,
                      renderer : radiogrid
                  },{ 
                      xtype: 'gridcolumn',
                      dataIndex: 'Ponderación',name: '',
                      header: 'Ponderación',
                      sortable: true,
                      grupable:true,
                      width: 150
                  },{ 
                      xtype: 'gridcolumn',
                      dataIndex: 'Nota final',name: '',
                      header: 'Nota final',
                      sortable: true,
                      grupable:true,
                      width: 150
                  }],


})

代码显示如下：

【问题讨论】：

标签： extjs grid radio-button extjs3 gridpanel

【解决方案1】：

也许尝试在网格上处理cellclick 事件的侦听器。使用 Ext 传递给此处理程序的参数，您可以访问存储记录以根据需要设置或获取值：

function(grid, rowIndex, columnIndex, e) {
    var record = grid.getStore().getAt(rowIndex);  // Get the Record
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
    var data = record.get(fieldName);
}

【讨论】：