extjs Grid checkboxmodel 分组和 Collapse 问题与行项目复选框选择
extjs Grid checkboxmodel grouping and Collapse issue with line item checkbox selection
我正在使用具有 checkbox in header
和 Collapse
功能的 Extjs Grid
分组。
问题出在折叠任何组时在单行中选择复选框。如果我 select/deselect 复选框,那么它 selecting/deselecting 一些其他复选框而不是单击行中的复选框。可能是什么问题?
下面是代码。
Ext.define('extGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
id: 'myGrid',
autoScroll: true,
height: 700,
store: 'myStore',
preventHeader: true,
{
ftype: 'grouping',
groupHeaderTpl: [
'<input id="\'check_{[values.rows[0].data.Id]}\'" class="chkGrp" type="checkbox" > <div style="display:inline-block; min-width: 500px;" >({[values.children.length]})</div> {[Ext.Date.format(new Date(values.rows[0].data.dueDate),\'d-M-Y\')]} '
],
hideGroupedHeader: false,
startCollapsed: false,
collapsible: true
},
selType: 'checkboxmodel',
selModel: {
injectCheckbox: 0,
pruneRemoved: false,
allowDeselect: false,
checkOnly: true,
singleSelect: false,
},
listeners: {
groupclick: function(grid, field, value, e){
var t = e.getTarget('.chkGrp');
if (t) {
var checked = t.checked;
var groupingFeature = grid.up('grid').getView().features[0];
groupingFeature.expand(value);
if (checked) {
Ext.get(t.id).dom.checked = true;
} else {
Ext.get(t.id).dom.checked = false;
}
grid.getStore().each(function(rec, index){
if(rec.data.m == value){
grid.getSelectionModel().setLocked(false);
if(checked) {
grid.getSelectionModel().select(index, true);
} else {
grid.getSelectionModel().deselect(index);
}
}
});
} else {
var checkBoxArray = Ext.get(field).query('.chkGrp');
if (checkBoxArray.length > 0) {
var checkBox = checkBoxArray[0];
Ext.get(checkBox.id).dom.checked = checkBox.checked;
}
}
}
},
columns: [
{
header: 'test',
dataIndex: 'test1',
width: 200,
}, {
header: 'test2',
sortable: true,
width: 400,
dataIndex: 'test3',
},
],
collapsible: true,
columnLines: true,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})]
});
我在下面找到了修复程序 URL,它对我有用。
http://www.sencha.com/forum/showthread.php?264961-Grid-Grouping-Bug
我正在使用具有 checkbox in header
和 Collapse
功能的 Extjs Grid
分组。
问题出在折叠任何组时在单行中选择复选框。如果我 select/deselect 复选框,那么它 selecting/deselecting 一些其他复选框而不是单击行中的复选框。可能是什么问题?
下面是代码。
Ext.define('extGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
id: 'myGrid',
autoScroll: true,
height: 700,
store: 'myStore',
preventHeader: true,
{
ftype: 'grouping',
groupHeaderTpl: [
'<input id="\'check_{[values.rows[0].data.Id]}\'" class="chkGrp" type="checkbox" > <div style="display:inline-block; min-width: 500px;" >({[values.children.length]})</div> {[Ext.Date.format(new Date(values.rows[0].data.dueDate),\'d-M-Y\')]} '
],
hideGroupedHeader: false,
startCollapsed: false,
collapsible: true
},
selType: 'checkboxmodel',
selModel: {
injectCheckbox: 0,
pruneRemoved: false,
allowDeselect: false,
checkOnly: true,
singleSelect: false,
},
listeners: {
groupclick: function(grid, field, value, e){
var t = e.getTarget('.chkGrp');
if (t) {
var checked = t.checked;
var groupingFeature = grid.up('grid').getView().features[0];
groupingFeature.expand(value);
if (checked) {
Ext.get(t.id).dom.checked = true;
} else {
Ext.get(t.id).dom.checked = false;
}
grid.getStore().each(function(rec, index){
if(rec.data.m == value){
grid.getSelectionModel().setLocked(false);
if(checked) {
grid.getSelectionModel().select(index, true);
} else {
grid.getSelectionModel().deselect(index);
}
}
});
} else {
var checkBoxArray = Ext.get(field).query('.chkGrp');
if (checkBoxArray.length > 0) {
var checkBox = checkBoxArray[0];
Ext.get(checkBox.id).dom.checked = checkBox.checked;
}
}
}
},
columns: [
{
header: 'test',
dataIndex: 'test1',
width: 200,
}, {
header: 'test2',
sortable: true,
width: 400,
dataIndex: 'test3',
},
],
collapsible: true,
columnLines: true,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})]
});
我在下面找到了修复程序 URL,它对我有用。
http://www.sencha.com/forum/showthread.php?264961-Grid-Grouping-Bug