如何让我的dojo gridx dojo小部件驻留在cellWidgets中自动写入商店?

时间:2015-05-13 13:34:16

标签: javascript dojo dojo.gridx

在具有editable: true的文本单元格上,我没有问题写入商店 - 单元格会自动写入商店,但我的cellWidgets都没有写入商店。

这里是我的代码片段(注释掉的顶行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商店?

1 个答案:

答案 0 :(得分:0)

通过使编辑模块设置正确,您可以将任何cellWidget自动保存到商店。请参阅此文档:Dojo Edit Module

当网格包含“编辑”模块时,这并不意味着所有单元格都可以立即编辑。相反,我们必须告诉网格哪些列包含可编辑字段。我们通过将名为editable的列属性设置为true来完成此操作。默认值为false,表示该列中的单元格不可编辑。

当要编辑单元格时,会在屏幕上单元格的位置创建一个新的Dojo小部件实例(Dijit)。此小组件负责显示当前值并允许用户更改该值。默认情况下,使用的窗口小部件是dijit.form.TextBox的实例,但是可以使用不同的窗口小部件类型。应该将名为editor的属性设置为要使用的Dijit类的String名称。如果使用,请记住定义此类类型的AMD包含。另一个名为editorArgs的列属性可用于为编辑器中指定的窗口小部件提供属性。 editorArgs属性是一个具有以下属性的对象:

props (String) - 在Dijit Widget上定义的一组属性 fromEditor (function(storeData, gridData)) toEditor (function(storeData, gridData, cell, editor)) - 调用函数来填充编辑器小部件。 editor参数是对用于编辑单元格的Dijit小部件的引用。 constraints (Object) - 传递给编辑器的其他属性。 useGridData (Boolean) - 编辑器是应该从商店还是从网格获取数据?默认值为false,表示使用商店数据。如果提供toEditor,则不使用此属性。 valueField (String) - 包含值的编辑器的属性。这通常是默认值。

当单元格的编辑完成后,输入的数据将被写回商店。我们可以通过提供一个函数来改变它的实现方式,该函数可以使用我们自己的逻辑来应用更改。这个属性是customApplyEdit,它是一个具有签名功能(单元格,值)的函数。代码负责将单元格的值设置为作为参数传入的值。

请参阅此jsfiddle:Working example