如何正确应用网格extjs中的单选按钮?

时间:2017-07-25 19:25:47

标签: extjs grid radio-button extjs3 gridpanel

我在当地工作。我使用一个函数来显示网格内的单选按钮,然后我调用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
                  }],


})

代码显示:

enter image description here

1 个答案:

答案 0 :(得分: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);
}