【发布时间】：2013-07-24 14:33:37
【问题描述】：
我有一个 EXT 网格，它使用渲染器在最后 2 列中有一个额外的复选框和单选框。当我在网格中检查一个项目并查看源代码时，我没有在 HTML 中看到 checked:checked 指定，因此我很难定位该元素。
选择一行时，我希望能够检查是否检查了复选框，我正在做这样的事情：
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));
}
}
});
【问题讨论】：
-
Checkcolumn 不会像您猜到的那样呈现真正的复选框实例。它只是使用应用的点击侦听器渲染图像。如果您需要知道选择了什么，我建议您使用适当的选择模型。然后，您可以通过这种方式轻松获取所有信息。
-
我将如何更改选择模型以在最后 2 列中呈现复选框和单选？我浏览了 EXT 的所有站点示例，但找不到明确的答案或示例？
-
如果您的网格中确实有多个模拟输入元素（我只看到一个复选框列），请使用网格的 beforecellclick 事件，该事件将允许您识别哪个单元格被单击并直接让你修改记录....
-
@sra 它可以工作：fiddle.sencha.com/#fiddle/32
-
@rixo 一如既往的好 ;) 是的，我错过了我的第一杯咖啡。阅读您的评论后，我想到了复选框选择模型，所以我的回答是错误的......所以是的，这是最简单，最干净的解决方案！您应该将其发布为答案，因为这也适用于该类型的多个 t´column。