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

时间:2015-05-15 16:14:53

标签: javascript combobox dojo dijit.form

我想我可能正在使用错误的dojo小部件。我确实需要一个下拉列表,但目前已经设置了ComboButton。当用户在onClick下拉菜单中选择一个选项时,我可以设置某种ComboButton或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('');
                }

            },

2 个答案:

答案 0 :(得分:1)

我认为您正在寻找的是onChange事件而不是onClick,您可能正在寻找DropDownButton而不是ComboButton,但无论如何,onChange是您应该寻找的方法。挂钩onChange方法的一个好方法是使用&#34; dojo / on&#34;并做这样的事情:

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

在您的具体情况下,我实际上会修改[cellWidget.identOpMode,&#39; onClick&#39;部分是&#39; onChange&#39;代替。

答案 1 :(得分:1)

理查德的建议很明显。根据他的建议和我所学到的,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);
});