Ext EditorGrid单元格控制小记
程序员文章站
2022-07-13 22:37:45
...
需求:
表格中,一列为复选框,另一列为下拉框。如果选中一列中的复选框,则要自动触发另一列复选框的单元格处于可编辑状态,让用户选择相应的选项。
如图:
[img]http://dl.iteye.com/upload/attachment/263638/4c7cf5dd-2804-3553-a0b9-16279642cc31.jpg[/img]
实现方式:
在复选框的选中事件中,增加如下代码:
整个代码为:
表格中,一列为复选框,另一列为下拉框。如果选中一列中的复选框,则要自动触发另一列复选框的单元格处于可编辑状态,让用户选择相应的选项。
如图:
[img]http://dl.iteye.com/upload/attachment/263638/4c7cf5dd-2804-3553-a0b9-16279642cc31.jpg[/img]
实现方式:
在复选框的选中事件中,增加如下代码:
//考勤原因单元格自动单击一下
var cell = this.grid.view.getCell(index, 5);
cell.click();
整个代码为:
//是否缺勤?
var checkIsAttendance = new Ext.grid.CheckColumn({//自定义控件。参考Ext官方示例:http://www.extjs.com/deploy/dev/examples/grid/edit-grid.html
header: '是否缺勤?',
dataIndex: 'isAbsence',
id: 'isAbsenceCheck',
width:80,
onChecked: function(checked, index, record){//参数:checkBox的选择状态 true/false
//改变实际出勤人数
if(checked){//选中一个表示多一个未出勤的人员,所以实际出勤人数-1
Ext.get("notAttendanceNum").dom.value--;
//alert(this.grid.getStore().getCount());
//加到未出勤人员列表中,用于显示
absenceArray.push(record.get("staffName"));
//考勤原因单元格自动单击一下
var cell = this.grid.view.getCell(index, 5);
cell.click();
//控制里面的选项
}else{
Ext.get("notAttendanceNum").dom.value++;
//从未出勤人员列表中移出
absenceArray.remove(record.get("staffName"));//数组中删除指定元素
}
var str = "";
for(var i=0; i<absenceArray.length; i++){
str += absenceArray[i];
str += ", ";
}
//缺勤人员添加到textArea中显示
Ext.get("absenceList").dom.value = str;
}
});