CODEWITHSUNDEEP
javascriptextjsextjs3
BigJobbies
BigJobbies

Reputation: 509

ExtJS 3.3.0 disable button without knowing ID

I was wondering if its possible to target a button without it having an id, the button is being created with the following attributes at the moment.

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

If I add id: 'saveButton' to it i can simply call;

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

and it works fine ... But I can't give the button an ID for different reasons.

I have details of the window that the button is created in if that helps

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

Upvotes: 1

Views: 433

Answers (1)

davidbuzatto
davidbuzatto

Reputation: 9424

For legacy ExtJS like 3.3.0, you can use something like this: 

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 );
        }
    });

});

I added the four buttons to a panel and iterate through the items property of it. This property is a Ext.util.MixedCollection. I think your buttons are inside some container, so this will probably work. Another possiblitity is to process the Ext.getBody() element, but this will need more offort to detect what you want. Live example here: https://fiddle.sencha.com/#view/editor&fiddle/27nh

For ExtJS 4 and above, you can use Ext.ComponentQuery.query function.

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);
});

I'm pretty rusty in ExtJS, since my last use of it was in 2009 :D

Upvotes: 1

Related Questions