如何让驻留在 cellWidgets 中的 dojo gridx dojo 小部件自动写入存储?
How do I get my dojo gridx dojo widgets residing in cellWidgets to write to the store automatically?
在具有 editable: true
的文本单元格上,我写入存储没有问题 - 单元格自动写入存储区,但我的 cellWidgets 的 none 写入存储区。
这是我的代码片段(被注释掉的最上面的第 2-5 行是我试过但没有成功的其他代码):
{ id: 'identColumnId', field: 'identColumn', name: 'Ident', width: '77px',
// editable: true,
// editor: 'dijit/form/ComboButton',
// editorArgs:{
// props:'store: identMemStore'
// },
widgetsInCell: true,
navigable: true,
setCellValue: function(one,two,cellWidget){
var rowIndex = cellWidget.cell.row.id;
var toggle = identMemStore.get(rowIndex).identColumn;
if (toggle)
{
this.identColumn.set('label', "Override");
this.identColumn.set("checked",false);
}else
{
this.identColumn.set('label', "Use Input");
this.identColumn.set("checked",true);
}
},
getCellWidgetConnects: function(cellWidget, cell){
// return an array of connection arguments
return [
[cellWidget.identColumn, 'onClick', function(e){
var rowIndex = cellWidget.cell.row.id;
var curValue = identMemStore.get(rowIndex).identColumn;
if (curValue === true){
cellWidget.identColumn.set('label', "Use Input");
cellWidget.identColumn.set("checked",true);
// Write to store manually...
// identMemStore.data[rowIndex-1].identColumn = false;
} else if (curValue === false){
cellWidget.identColumn.set('label', "Override");
cellWidget.identColumn.set("checked",false);
// Write to store manually...
// identMemStore.data[rowIndex-1].identColumn = true;
} else {
console.log("ERROR");
}
}]
];
},
decorator: function(){
return "<button data-dojo-type='dijit/form/ToggleButton' data-dojo-attach-point='identColumn' ></button>";
}
},
我还设置了代码以在数据写入存储后捕获单元格编辑的更改。同样,我的文本单元格工作正常并执行了以下代码,但我的其他 dojo 小部件不写入商店,因此不会触发以下代码,该代码在编辑完成并且商店已被删除后执行写给.
identGridx.edit.connect(identGridx.edit, "onApply", function(cell, success) {
var item = cell.row.data();
var id = cell.row.id;
console.log('Row with ID ' + id + ' is modified. New value: ' + item);
});
如何让 cellWidgets 中的 dojo 小部件写入 gridx 存储?
通过正确设置编辑模块,您可以将任何 cellWidget 自动保存到商店。请参阅此文档:Dojo Edit Module
当网格包含编辑模块时,这并不意味着所有单元格都可以立即编辑。相反,我们必须告诉网格哪些列包含可编辑字段。为此,我们将名为 editable 的列 属性 设置为 true。默认值为 false,这意味着该列中的单元格不可编辑。
当要编辑单元格时,会在屏幕上单元格的位置创建一个新的 Dojo 小部件 (Dijit) 实例。此小部件负责显示当前值并允许用户更改该值。默认情况下,使用的小部件是 dijit.form.TextBox 的实例,但是可以使用不同的小部件类型。 属性 调用的编辑器应设置为要使用的 Dijit class 的字符串名称。如果使用,请记住定义此 class 类型的 AMD 包含。另一个名为 editorArgs 的列 属性 可用于为在编辑器中命名的小部件提供属性。 editorArgs 属性 是一个具有以下属性的对象:
props (String)
- 在 Dijit 小部件上定义的属性集
fromEditor (function(storeData, gridData))
toEditor (function(storeData, gridData, cell, editor))
- 调用函数来填充编辑器小部件。 editor 参数是对用于编辑单元格的 Dijit 小部件的引用。
constraints (Object)
- 传递给编辑器的附加属性。
useGridData (Boolean)
- 应该向编辑器提供来自商店还是网格的数据?默认为 false,表示使用商店数据。如果提供了 toEditor,则不使用此 属性。
valueField (String)
- 保存该值的编辑器的 属性。这通常是默认值。
单元格编辑完成后,输入的数据将写回存储区。我们可以通过提供一个函数来改变这是如何实现的,以使用我们自己的逻辑来应用更改。 属性 是 customApplyEdit,它是一个带有签名 function(cell, value) 的函数。代码负责将单元格的值设置为作为参数传入的值。
查看这个 jsfiddle:Working example
在具有 editable: true
的文本单元格上,我写入存储没有问题 - 单元格自动写入存储区,但我的 cellWidgets 的 none 写入存储区。
这是我的代码片段(被注释掉的最上面的第 2-5 行是我试过但没有成功的其他代码):
{ id: 'identColumnId', field: 'identColumn', name: 'Ident', width: '77px',
// editable: true,
// editor: 'dijit/form/ComboButton',
// editorArgs:{
// props:'store: identMemStore'
// },
widgetsInCell: true,
navigable: true,
setCellValue: function(one,two,cellWidget){
var rowIndex = cellWidget.cell.row.id;
var toggle = identMemStore.get(rowIndex).identColumn;
if (toggle)
{
this.identColumn.set('label', "Override");
this.identColumn.set("checked",false);
}else
{
this.identColumn.set('label', "Use Input");
this.identColumn.set("checked",true);
}
},
getCellWidgetConnects: function(cellWidget, cell){
// return an array of connection arguments
return [
[cellWidget.identColumn, 'onClick', function(e){
var rowIndex = cellWidget.cell.row.id;
var curValue = identMemStore.get(rowIndex).identColumn;
if (curValue === true){
cellWidget.identColumn.set('label', "Use Input");
cellWidget.identColumn.set("checked",true);
// Write to store manually...
// identMemStore.data[rowIndex-1].identColumn = false;
} else if (curValue === false){
cellWidget.identColumn.set('label', "Override");
cellWidget.identColumn.set("checked",false);
// Write to store manually...
// identMemStore.data[rowIndex-1].identColumn = true;
} else {
console.log("ERROR");
}
}]
];
},
decorator: function(){
return "<button data-dojo-type='dijit/form/ToggleButton' data-dojo-attach-point='identColumn' ></button>";
}
},
我还设置了代码以在数据写入存储后捕获单元格编辑的更改。同样,我的文本单元格工作正常并执行了以下代码,但我的其他 dojo 小部件不写入商店,因此不会触发以下代码,该代码在编辑完成并且商店已被删除后执行写给.
identGridx.edit.connect(identGridx.edit, "onApply", function(cell, success) {
var item = cell.row.data();
var id = cell.row.id;
console.log('Row with ID ' + id + ' is modified. New value: ' + item);
});
如何让 cellWidgets 中的 dojo 小部件写入 gridx 存储?
通过正确设置编辑模块,您可以将任何 cellWidget 自动保存到商店。请参阅此文档:Dojo Edit Module
当网格包含编辑模块时,这并不意味着所有单元格都可以立即编辑。相反,我们必须告诉网格哪些列包含可编辑字段。为此,我们将名为 editable 的列 属性 设置为 true。默认值为 false,这意味着该列中的单元格不可编辑。
当要编辑单元格时,会在屏幕上单元格的位置创建一个新的 Dojo 小部件 (Dijit) 实例。此小部件负责显示当前值并允许用户更改该值。默认情况下,使用的小部件是 dijit.form.TextBox 的实例,但是可以使用不同的小部件类型。 属性 调用的编辑器应设置为要使用的 Dijit class 的字符串名称。如果使用,请记住定义此 class 类型的 AMD 包含。另一个名为 editorArgs 的列 属性 可用于为在编辑器中命名的小部件提供属性。 editorArgs 属性 是一个具有以下属性的对象:
props (String)
- 在 Dijit 小部件上定义的属性集
fromEditor (function(storeData, gridData))
toEditor (function(storeData, gridData, cell, editor))
- 调用函数来填充编辑器小部件。 editor 参数是对用于编辑单元格的 Dijit 小部件的引用。
constraints (Object)
- 传递给编辑器的附加属性。
useGridData (Boolean)
- 应该向编辑器提供来自商店还是网格的数据?默认为 false,表示使用商店数据。如果提供了 toEditor,则不使用此 属性。
valueField (String)
- 保存该值的编辑器的 属性。这通常是默认值。
单元格编辑完成后,输入的数据将写回存储区。我们可以通过提供一个函数来改变这是如何实现的,以使用我们自己的逻辑来应用更改。 属性 是 customApplyEdit,它是一个带有签名 function(cell, value) 的函数。代码负责将单元格的值设置为作为参数传入的值。
查看这个 jsfiddle:Working example