我可以设置我的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?

本文关键字：用户 下拉列表 选择 onClick dijit 形式 dojo 我的 设置 ComboButton 一个      更新时间：2023-09-26

我想我可能使用了错误的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('');
                }
            },

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

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

在您的具体情况下，我实际上会修改[cellWidget]。identOpMode， 'onClick'部分改为'onChange'。

Richard的建议非常正确。从他的建议和我了解到的情况来看，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);
});
相关文章：