ExtJS 3.3.0禁用按钮,不知道ID

时间:2017-10-02 23:20:45

标签: javascript extjs extjs3

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

1 个答案:

答案 0 :(得分: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()元素,但这需要更多的offort来检测你想要的东西。这里的实例: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