EXTJS-如何在网格中以渲染复选框输入为目标
我有一个EXT grid，在最后两列中使用渲染器添加了一个复选框和单选框。当我在网格中检查一个项目并查看源代码时，我在HTML中没有看到checked:checked名称，因此我很难将目标定位到元素 当选择一行时，我希望能够检查复选框是否已选中，我正在执行以下操作：EXTJS-如何在网格中以渲染复选框输入为目标,extjs,extjs4.2,Extjs,Extjs4.2,我有一个EXT grid，在最后两列中使用渲染器添加了一个复选框和单选框。当我在网格中检查一个项目并查看源代码时，我在HTML中没有看到checked:checked名称，因此我很难将目标定位到元素 当选择一行时，我希望能够检查复选框是否已选中，我正在执行以下操作： if (document.getElementById("#isFull-"+record['index']+"").checked == true){ var myVar = true; } { text: 'F
if (document.getElementById("#isFull-"+record['index']+"").checked == true){
var myVar = true;
}
{
text: 'Full',
dataIndex:'isFull',
width: 70,
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)" /></center>';
}
},
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')
});
});
Ext.onReady（函数（）{
Ext.QuickTips.init（）；
//数据存储
var data=Ext.create（'Ext.data.JsonStore'{
自动加载：对，
字段：[“名称”、“市场”、“专业知识”、“id”、“isFull”、“isPrimary”]，
代理：{
键入：“ajax”，
url:“/opsLibrary/getLibraryJson”
}
});
//选择模型
var selModel=Ext.create（'Ext.selection.CheckboxModel'{
栏目：[{
xtype:“检查列”，
文本：“活动”，
数据索引：“id”
}],
听众：{
selectionchange：函数（值、元、记录、行索引、共索引）{
var selectedRecords=grid4.getSelectionModel（）.getSelection（）；
var selectedParams=[]；
//清除隐藏的输入
$（“#所选库”）.empty（）；
var记录=null；
var-myVar=null；
var myVar2=null；
for（变量i=0，len=selectedRecords.length；iget（）
函数而不是对象表示法访问记录中的数据：
if (document.getElementById("isFull-"+record.get('index')).checked == true)
{
var myVar = true;
}
还有几点……您正在使用==true
检查真值，这将为任何“truthie”返回真值。如果您想检查它是否等于真值，您需要使用==
也可以考虑<代码> Ext.For（）/代码>来获取元素，它更友好：
if (Ext.fly("isFull-"+record.get('index')).dom.checked === true)
{
var myVar = true;
}
为简单起见，您甚至可以这样做：
var myVar = Ext.fly("isFull-"+record.get('index')).dom.checked;
编辑：
// 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));
}
}
});
我的印象是您将索引
作为存储字段之一，但我刚刚注意到它不是。您需要使用存储.indexOf（record）
来获取所需的索引：
var myVar = Ext.fly("isFull-" + data.indexOf(record)).dom.checked;
也许，您可以在网格视图上使用一个侦听器：
Sencha api[4.2]：
让我们尝试另一种方法。如果您将检查列设置为执行以下操作，该怎么办：
if (document.getElementById("#isFull-"+record['index']+"").checked == true){
var myVar = true;
}
{
text: 'Full',
dataIndex:'isFull',
width: 70,
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)" /></center>';
}
},
{
正文：“全文”，
数据索引：'isFull'，
宽度：70，
渲染器：函数（值、元、记录、行索引、共索引）{
返回“”；
}
},
这应该将值直接设置到记录中。当我尝试实现其中任何一个时，我遇到了以下错误--Uncaught TypeError:无法读取Null的属性'dom'，我的响应中有一个输入错误--在使用getElementById
或Ext.fly（）时，不应该使用
。请在不使用#
的情况下再试一次。没有骰子，当我选中其中一个框时，事件正在触发，但仍在返回--未捕获类型错误：无法读取null的属性“dom”。当我在Firebug中查看源代码时，我看不到“checked:checked”或类似的内容，在Firebug match中看到的复选框的id
de>“isFull-”+record.get（'index'）
您正在检查？该错误似乎表明它没有检查。检查firebug中的id
，然后执行console.log（“isFull-”+record.get（'index'））
在你的函数中查看ID是否匹配。我被阻止聊天，但是在复选框被选中之前，selectionchange
可能会被触发，所以只要否定选中的值，你就可以开始了：var myVar=！Ext.fly（“isFull-”+data.indexOf（record））.dom.checked；
uncaughttypeerror:无法读取null buildLibraryGrid的属性'dom'。js:41 uncaughttypeerror:对象-1没有方法'set'[VM]新建（7607）：1 onclickBah，我的错误。需要用getAt
包围findExact
：onclick=“var s=Ext.getCmp（\'button-grid\）.store；s.getAt（s.findExact（\'id\'，\''+record.get（'id'）+'\'）.set（\'isFull\'，this.value）“
为什么您仍然试图这样设置myVar
呢？此时应该已经设置了值，您可以使用record.get（'isFull'））
。Ext.fly
部分应该不再需要，因为复选框代码直接在记录上设置值。您应该能够使用myVar=record.get（'isFull'）
而不是Ext.fly（…）
行。您可以将ID添加回check/radio，然后只需设置Ext.fly（checkboxId）.dom