javascript - ExtJS 3.3.0 在不知道 ID 的情况下禁用按钮

Question

我想知道是否可以在没有 id 的情况下定位按钮，目前正在创建具有以下属性的按钮。

{
    iconCls: 'icon-ok',
    text: 'Save'
}

如果我添加 id: 'saveButton' 到它，我可以简单地调用；

Ext.getCmp('saveButton').setDisabled(true);

它工作正常......但由于不同的原因我不能给按钮一个 ID。

如果有帮助，我有创建按钮的窗口的详细信息

id: 'updateDialog',
modal: true,
width: {$windowWidth},
height: {$windowHeight},
labelAlign: 'top',
title: "Update",
layout:'vbox',

Answer 1

对于像 3.3.0 这样的遗留 ExtJS，你可以使用这样的东西:

Ext.onReady(function () {

    var btn1 = new Ext.Button({
        iconCls: 'icon-ok',
        text: 'Save 01 (ok)'
    });

    var btn2 = new Ext.Button({
        iconCls: 'icon-not-ok',
        text: 'Save 02 (not ok)'
    });

    var btn3 = new Ext.Button({
        iconCls: 'icon-ok',
        text: 'Save 03 (ok)'
    });

    var btn4 = new Ext.Button({
        iconCls: 'icon-not-ok',
        text: 'Save 04 (not ok)'
    });

    var panel = new Ext.Panel({
        renderTo: document.body,
        title: 'Panel',
        items: [ btn1, btn2, btn3, btn4 ]
    });

    panel.items.each( function( element, index, array ) {
        if ( element.iconCls === 'icon-ok' ) {
            element.setDisabled( true );
        }
    });

});

我将四个按钮添加到一个面板，并循环访问它的 items 属性。此属性是一个 Ext.util.MixedCollection。我认为您的按钮在某个容器内，所以这可能会起作用。另一种可能性是处理 Ext.getBody() 元素，但这将需要更多的努力来检测您想要的内容。现场示例:https://fiddle.sencha.com/#view/editor&fiddle/27nh

对于 ExtJS 4 及以上版本，您可以使用 Ext.ComponentQuery.query 函数。

Ext.create('Ext.Button', {
    renderTo: document.body,
    iconCls: 'icon-ok',
    text: 'Save 01'
});

Ext.create('Ext.Button', {
    renderTo: document.body,
    iconCls: 'icon-ok',
    text: 'Save 02'
});

Ext.create('Ext.Button', {
    renderTo: document.body,
    iconCls: 'icon-ok',
    text: 'Save 03'
});

var components = Ext.ComponentQuery.query('[iconCls=icon-ok]');
components.forEach( function( element, index, array ) {
    element.setDisabled(true);
});

我对 ExtJS 很生疏，因为我最后一次使用它是在 2009 年:D