如何在网格 extjs 中正确应用单选按钮?
How can I apply correctly a radio button in a grid extjs?
我在当地工作。我使用了一个函数来显示网格内的单选按钮,然后我在 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
}],
})
代码显示如下:
也许在处理 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);
}
我在当地工作。我使用了一个函数来显示网格内的单选按钮,然后我在 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
}],
})
代码显示如下:
也许在处理 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);
}