ExtJS检查栏网格 - 检查左侧的列，向右删除列 [英] ExtJS checkcolumn grid - check columns to left, uncheck columns to right
问题描述
我正在开发一个ExtJS网格，其中包含一个详细说明网格中项目的文本列，以及表示某个项目是否通过某个过程中的特定点的几个checkColumn：
I am working on an ExtJS grid comprised of a text column detailing the items in the grid, and several checkColumns that represent whether an item has been through a particular point in a process:
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.ux.CheckColumn'
]);
Ext.onReady(function(){
Ext.define('ProcessModel', {
extend: 'Ext.data.Model',
fields: [
'Item',
'Phase1',
'Phase2',
'Phase3',
'Phase4',
'Phase5',
'Phase6',
'Phase7',
'Phase8',
'Phase9',
'Phase10'
]
});
// create the Data Store
var processStore = Ext.create('Ext.data.Store', {
model: 'processModel',
autoLoad: true,
proxy: {
// load using HTTP
type: 'ajax',
url: '<?= $site_url ?>/Production/Processes/<?= $itemId ?>',
reader: {
type: 'json',
model: 'ProcessModel',
root: data
}
}
});
Ext.create('Ext.grid.Panel', {
width: 800,
store: processStore,
title: 'Processes',
tbar: [
{
xtype: 'button',
text: 'Update',
handler: function(){
//TODO: update by POST function
}
}
],
columns: [
{
text: 'Item',
dataIndex: 'Item'
},{
xtype: 'checkcolumn',
text: 'Phase 1',
dataIndex:'Phase1'
},{
xtype: 'checkcolumn',
text: 'Phase 2',
dataIndex:'Phase2'
},{
xtype: 'checkcolumn',
text: 'Phase 3',
dataIndex:'Phase3'
},{
xtype: 'checkcolumn',
text: 'Phase 4',
dataIndex:'Phase4'
},{
xtype: 'checkcolumn',
text: 'Phase 5',
dataIndex:'Phase5'
},{
xtype: 'checkcolumn',
text: 'Phase 6',
dataIndex:'Phase6'
},{
xtype: 'checkcolumn',
text: 'Phase 7',
dataIndex:'Phase7'
},{
xtype: 'checkcolumn',
text: 'Phase 8',
dataIndex:'Phase8'
},{
xtype: 'checkcolumn',
text: 'Phase 9',
dataIndex:'Phase9'
},{
xtype: 'checkcolumn',
text: 'Phase 10',
dataIndex:'Phase10'
}
],
renderTo: Ext.get('sencha_processes')
});
});
我不知道如何实现功能，它检查该复选框左侧的所有内容，即检查阶段5的项目3和阶段1-4的项目3也被检查。我假设类似的代码将被用来取消选中右侧的复选框，如果它被取消选中，即取消选中项目7的阶段5和阶段6-10为项目7未选中。
I'm not sure how to implement functionality where, when a checkbox is checked for a given row, it checks everything to the left of that checkbox, i.e. check 'Phase 5' for 'Item 3' and phases 1-4 for 'Item 3' are also checked. I assume similar code would be used to uncheck checkboxes to the right if it were unchecked, i.e. uncheck 'Phase 5' for 'Item 7' and phases 6-10 for 'Item 7' are unchecked.
我认为它将使用checkChange事件，其中一个函数将检查更改是'checked'/ true，向上移动DOM，以某种方式标识哪个列在给定列的左侧，将给定的rowIndex上的复选框设置为checked，这反过来可能（？）触发其checkChange事件，并级联直到它到达第一列并停止;可能有一个更有效的方法来做到这一点，但我不知道确定。
I think it will use the checkChange event, where a function would check the change was to 'checked'/true, move up the DOM, somehow identify which column was to the left of a given column, and set the checkbox on the given rowIndex to checked, which in turn might(?) fire its checkChange event, and cascade through until it reached the first column and stop; there might be a more efficient method to do this, but I don't know for certain.
这也可以处理取消选择右，检查更改是/ unchecked/ false，向右移动，取消选中每列，直到到达和取消选中最后一列。
This could also handle the uncheck-to-right, checking the change was to 'unchecked'/false, moving to the right and unchecking each column until the last column is reached and unchecked.
有些伪代码可能有帮助：
Some pseudo-code to hopefully help:
listeners: {
checkChange: {
function (this, rowIndex, checked, eOpts) {
if(checked) {
column = this.up('column').getNameOrId -1;
boxToLeft = column.down('row').rowIndex.getCheckBox;
boxToLeft.check;
};
if(!checked) {
column = this.up('column').getNameOrId +1;
boxToRight = column.down('row').rowIndex.getCheckBox;
boxToLeft.uncheck;
}
}
}
我需要将ID应用到我的列以允许通过通用函数进行迭代吗？解决方案是否为每列的多个功能？我可以使用什么属性/方法/事件？
How would this be coded? Do I need to apply Ids to my columns to allow iteration through a generic function? Is the solution multiple functions for each column? What properties/methods/events am I to use?
另外，我也将实现选择/取消选择列中的所有答案在这里已经，并将可行的触发选择所有到左/取消选择一个单独的事件，所以我只提到它，如果它与这个问题相关。
As an aside, I'll also be implementing "select/deselect all in a column", but there are enough answers for that on here already, and would feasibly trigger the "select all to left/deselect all to right" as a separate event, so I'm only mentioning it in case it is relevant to this question.
推荐答案
不要尝试在列中选中复选框，只需获取记录即绑定到用户单击复选框的行。
Do not try to check checkbox in columns, just get record which is bind to row on which user click on checkbox.
然后，您可以根据用户点击复选框来更改记录phase1 - phase10值。
Then you can change record phase1 - phase10 values based on in which column user click on checkbox.
checkChange 事件处理程序应该如下所示：
Your checkChange event handler should look like this:
function onCheckChange (column, rowIndex, checked, eOpts) {
// get record which is bind to row on which user click on checbox
var record = processStore.getAt(rowIndex);
// get index of column
var columnIndex = column.getIndex();
// change record values
for (var i = 1; i <= 10; i++) {
if (i <= columnIndex) {
record.set('Phase'+i, true);
}
else
{
record.set('Phase'+i, false);
}
}
}
> https://fiddle.sencha.com/#fiddle/2t4
Fiddle with example: https://fiddle.sencha.com/#fiddle/2t4
这篇关于ExtJS检查栏网格 - 检查左侧的列，向右删除列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
