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

Posted 2023-02-26

【中文标题】ExtJS 3.3.0 在不知道 ID 的情况下禁用按钮

【英文标题】：ExtJS 3.3.0 disable button without knowing ID

【发布时间】：2017-10-02 23:20:44

【问题描述】：

我想知道是否可以在没有 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',

【问题讨论】：

按钮之外的什么，你有参考吗？再贴一些周围的结构。

@EvanTrimboli 如果有帮助，我已经更新了我的问题。按钮位于窗口内

您可以尝试窗口上的find 或findByType 方法。你可能还想看看ref：extjs.cachefly.net/ext-3.3.1/docs/source/… 虽然它可能有点脆弱。

@EvanTrimboli 谢谢你.. 我会检查一下

代码不够用，要看调用setDisabled的代码和按钮的关系。

【参考方案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

【讨论】：

嘿，谢谢你...我也可以将查询设置为 [text=Save] 吗？

非常确定组件查询直到 Ext 4.x 才引入。

@EvanTrimboli ... 3.3.0 有替代方案吗？

我收到以下错误 - 无法读取未定义的属性“查询”

@BigJobbies 这是因为我的代码适用于 ExtJS 4 及更高版本。我更新了代码以允许在旧版 ExtJS 中使用您想要的东西。