单击特定按钮时禁用某些按钮

Disable certain buttons when you click on a specific button

本文关键字：按钮单击更新时间：2023-09-26

我有3个按钮，当我单击按钮3时，我希望禁用按钮1和2。我能做到。当我尝试设置另一个侦听器以在单击按钮2时禁用按钮1和3时，它无法正常工作。它似乎处于某种循环中。下面列出了我的代码：

{
                                text: 'Button 1',
                                name: 'button1',
                                cls: 'x-btn-text-icon',
                                listeners: {"click": function (){
                                    Ext.getCmp("button2").disable();
                                    Ext.getCmp("button3").disable();
                                    }
                                },
                                icon: 'public/images/edit.gif'
                            },{
                                text: 'Button 2',
                                name: 'button2',
                                cls: 'x-btn-text-icon',
                                listeners: {"click": function (){
                                    Ext.getCmp("button1").disable();
                                    Ext.getCmp("button3").disable();
                                    }
                                },
                                icon: 'public/images/edit.gif'
                            },{
                                text: 'Button 3',
                                name: 'button3',
                                cls: 'x-btn-text-icon',
                                listeners: {"click": function (){
                                    Ext.getCmp("button1").disable();
                                    Ext.getCmp("button2").disable();
                                    }
                                },
                                icon: 'public/images/edit.gif'
                            }

有没有更简单的方法来实现这一点？我感谢你的帮助。

Ext.getCmp用于id属性。您的按钮具有name属性，将name更改为id，您的示例应该可以工作。

我想您可能想要的是toggleGroup。

我使用了另一种方式，但我不确定是否符合您的需求。如果它对你有意义，请尝试下面的内容。

我创建了一个超出范围的数组来保留按钮id
然后做了一个禁用按钮的功能，除了点击
我使用按钮组来组织按钮

var buttons = new Array();
var disableButtons = function (btn) {
    // here it is to query button group by name
    var btns = Ext.ComponentQuery.query('buttongroup, [name=btnGroup]');
    var count = btns.length;
    for (var i = 1, x = 0; i < count; i++, x++) {
        this.buttons[x] = btns[i].id;
    }
    // this is the tricky part, disable all buttons except the clicked
    var index = this.buttons.indexOf(btn);
    if (index !== -1) {
        this.buttons.splice(index, 1);
    }
    Ext.Array.each(buttons, function (name) {
        Ext.getCmp(name).disable();
    })
}
// in any case, I created a function to enable all button status
// just add an other button in the scene and call this function
var enableButtons = function () {
    Ext.Array.each(buttons, function (name) {
        Ext.getCmp(name).enable();
    });
    // The following line necessary to keep array clean when user wants to disable
    // buttons again. The best way to empty an array, just set length to '0'
    buttons.length = 0;
}

// I used these functions for window component. When user click 'ADD' button, 
// buttons listener calls this function
{
text: 'EKLE',
scale: 'medium',
disabled: true,
width: 100,
margin: '0 9 0 0',
cls: 'btn-article-save',
id: 'btnArticleSave',
name: '_btnArticle',
listeners: {
    click: function () {
        var sel = Ext.getCmp('article-grid').getSelectionModel().getSelection();
        Ext.each(sel, function (item, index) {
            arrArticle.push(item);
        });
        arrArticleStore.load();
        Ext.getCmp('articles-grid').getView().bindStore(arrArticleStore);
        Ext.getCmp('articles-grid').show();
        var alevel = Ext.ComponentQuery.query('textfield[name=artLevel]');
        var avalue = Ext.ComponentQuery.query('textfield[name=artValue]');
        var artActions = [];
        for (var i = 0; i < alevel.length; i++) {
            artActions[i] = {'LEVELS': alevel[i].value, 'VALUES': avalue[i].value}
        }
        var count = winArticle.down('fieldset[id=article-fieldset]').items.items.length;
        for (i = 1; i <= count; i++) {
            var container = 'artContainer' + i;
            winArticle.down('fieldset[id=article-fieldset]').remove(container);
        }
        var qry = winArticle.query();
        for (var i = 0; i < qry.length; i++) {
            if (qry[i].xtype === 'textfield') {
                var txt = qry[i].id;
                Ext.getCmp(txt).reset();
                articles.loadData([], false);
            }
        }
        var _name = this.name;
        disableButtons(_name);
    }
}

}