当用户在下拉列表中选择一个值时，我可以设置我的 dojo dijit 表单 ComboButton 来执行 onClick 或类似操作吗？

Question

我想我可能使用了错误的 dojo 小部件。我真的只需要一个下拉列表，但目前已经设置了 ComboButton。当用户在 ComboButton 向下菜单中选择一个选项时，我可以设置某种 onClick 或 onSelect 吗？当用户单击文本区域按钮而不是下拉箭头选择时，我当前的 onClick 正在拾取。我想要在用户单击向下箭头按钮然后选择一个选项后执行 onClick 或 onSelect 操作。

            {id: 'identOpModeId', field: 'identOpMode', name:'OpMode', width: '124px',
                navigable: true,
                expandLevel: 'all',
                widgetsInCell: true,
                allowEventBubble: true,
                onCellWidgetCreated: function(cellWidget, cell){
                    var menuItems = OpModeMenuItems.returnOpModeMenuItems(cellWidget);
                    menuItems.forEach( function (menuItem)
                    {
                        cellWidget.sMenu.addChild(menuItem);
                    });
                },
                setCellValue: function(one,two,cellWidget){
                    var rowIndex = cellWidget.cell.row.id;
                    cellWidget.identOpMode.set("label", identMemStore.get(rowIndex).identOpMode);
                },
                getCellWidgetConnects: function(cellWidget, cell){
                    // return an array of connection arguments
                    return [

                        // How do I capture the onClick of the dijitArrowButton button??

                        [cellWidget.identOpMode, 'onClick', function(e){
                            var rowIndex = cellWidget.cell.row.id;
                            // I do NOT need this line - the drop down menu already sets the value! I just need to update the store!!
                            //cellWidget.identOpMode.set("label", identMemStore.get(rowIndex).identOpMode);
                            identMemStore.data[rowIndex-1].identOpMode = identMemStore.get(rowIndex).identOpMode;
                            // cellWidget.data[rowIndex].identOpMode = identMemStore.get(rowIndex).identOpMode;
                            // Add item to userRowChanges
                            updateRows(rowIndex-1, identGridx.row(rowIndex-1).item());
                        }]
                    ];
                },
                decorator: function(){
                    return [
                        '<div data-dojo-attach-point="identOpMode" data-dojo-type="dijit/form/ComboButton" >',
                        '<div data-dojo-attach-point="sMenu" data-dojo-type="dijit/Menu"></div></div>'
                    ].join('');
                }

            },

Answer 1

我认为您正在寻找的是 onChange 事件而不是 onClick，您可能正在寻找 DropDownButton 而不是 ComboButton，但无论哪种方式，onChange 都是您应该寻找的方法。挂接到 onChange 方法的一个好方法是使用 "dojo/on" 并执行如下操作：

on(this.identOpMode, "change", function() {
   //Do something here
});

根据您的具体情况，我实际上会将 [cellWidget.identOpMode、'onClick' 部分修改为 'onChange'。

Answer 2

理查德的建议很正确。根据他的建议和我所了解的，dojo/on 是更正的解决方案。这是我的解决方案，使用 dijit/form/ComboButton 虽然我将来可能会更改为 DropDownBox，但现在它正在工作，所以我将保留它。

对于我的 dijit/form/ComboButton，我只是为列表中的每个项目添加代码到我的 onClick 以获取数据更改。

returnOpModeMenuItems: function (CellWidget)
{
    var menu = [];
    var labels = ["Label1","Label2","Label3"];
    labels.forEach( function (label)
    {
        var menuItem = new dijit.MenuItem({
            label : label,
            value : label,
            onClick : function (value) {
                CellWidget.identOpMode.set('label', label);

                var rowIndex = CellWidget.cell.row.id;
                identMemStore.data[rowIndex-1].identOpMode = label;

                updateRows(rowIndex-1, identGridx.row(rowIndex-1).item());
            }
        });
        menu.push(menuItem);
    });
    return menu;
}

对于其他没有 onClick 的 dojo 小部件，我使用了以下内容：

                { id: 'srcSelVideoFrameRateId', field: 'srcSelVideoFrameRate', name: 'Frame Rate', width: '77px',
                    widgetsInCell: true,
                    navigable: true,
                    setCellValue: function(gridData, storeData, cellWidget){
                        var rowIndex = cellWidget.cell.row.index()+1;
                        var spinnerVal = sourceSelVideoTabMemStore.get(rowIndex).srcSelVideoFrameRate;

                        cellWidget.srcSelVideoFrameRate.set('style', "width:55px");
                        cellWidget.srcSelVideoFrameRate.set('value', spinnerVal);
                    },
                    getCellWidgetConnects: function(cellWidget, cell){
                        // return an array of connection arguments
                        return [
                            [cellWidget.srcSelVideoFrameRate, 'onChange', function(e){
                                var rowIndex = cellWidget.cell.row.id;
                                sourceSelVideoTabMemStore.data[rowIndex-1].srcSelVideoFrameRate = cellWidget.srcSelVideoFrameRate.displayedValue;

                                // Add item to userRowChanges
                                updateRows(rowIndex-1, srcSelVideoGridx.row(rowIndex-1).item());
                            }]
                        ];
                    },
                    decorator: function(){
                        return "<input data-dojo-type='dijit/form/NumberSpinner' data-dojo-props='smallDelta:0.1, largeDelta:1.0, constraints:{min:1,max:24,places:1,round:false},' data-dojo-attach-point='srcSelVideoFrameRate' />";
                    }
                },

对于基本的文本可编辑字段，我使用以下内容：

srcSelVideoGridx.edit.connect(srcSelVideoGridx.edit, "onApply", function(cell, success) {
    var item = cell.row.data();
    var rowId = cell.row.id-1;
    console.log('Row with ID ' + rowId + ' is modified. New value: ' + item);
    updateRows(rowId, item);
});

当用户在下拉列表中选择一个值时，我可以设置我的 dojo dijit 表单 ComboButton 来执行 onClick 或类似操作吗？

Can I setup my dojo dijit form ComboButton to do a onClick or something similar when the user selects a value in the drop down list?

javascript

dojo

combobox

dijit.form