CODEWITHSUNDEEP
javascripthtmlextjs
Gendaful
Gendaful

Reputation: 5802

EXTJS 6.0.2 - Disable button for File Field not working

I am trying to disable the disable the button on filefield at runtime from viewcontroller but I am getting the error.

Error in Component.js

me.ariaEl.dom.setAttribute('aria-disabled', false); // Cannot read property 'setAttribute' of null [ Seems me.ariaEl.domis coming as null]

Error stack trace .........

Uncaught TypeError: Cannot read property 'setAttribute' of null
at constructor.onEnable (Component.js?version=20170809094755:4378)
at constructor.callParent (Base.js?version=20170809094755:1288)
at constructor.onEnable (Button.js?version=20170809094755:1786)
at constructor.callParent (Base.js?version=20170809094755:1288)
at constructor.onEnable (FileButton.js?version=20170809094755:165)
at constructor.enable (Component.js?version=20170809094755:3033)
at constructor.setDisabled (Component.js?version=20170809094755:4863)

I have a simple file field,

           {
                xtype: 'filefield',
                fieldLabel: 'Attach Items',
                buttonText: 'Browse Items',
                itemId : 'buttonid',
                buttonConfig: {
                    id : 'uploadmailwidget0Btn'


                },
           }

Trying to disable in viewcontroller as - Code:

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

Can someone please help? Ask is simple, I want to disable the button on filefield from viewcontroller.

Upvotes: 1

Views: 1930

Answers (2)

Alexandre Neukirchen
Alexandre Neukirchen

Reputation: 2783

As shown in the ExtJS 6 documentation, the setDisabled method is private, so it is inaccessible.

However, we can do something like this. Keep in mind that this solution is not smart, but it works. Test the example fiddle.

Ext.application({
    name : 'Fiddle',
    launch : function() {
        Ext.create('Ext.window.Window', {
            title: 'Hello',
            height: 200,
            width: 400,
            layout: 'fit',
            items:  [{
                 xtype: 'filefield',
                 id: 'fileid',
                 fieldLabel: 'Attach Items',
                 buttonText: 'Browse Items',
                 itemId: 'buttonid',
                 buttonConfig: {
                     id: 'uploadmailwidget0Btn'
                 }
            }, {
                 xtype: 'button',
                 text: 'Click to set disable',
                 handler : myBtnHandler
            }]
        }).show();

    }
});

var myBtnHandler = function(btn) {

    if (Ext.getCmp('fileid').bodyElement.dom.childNodes[0].childNodes[2].childNodes[1].childNodes[0].childNodes[2].disabled)
    {
        btn.setText('Click to set disable');
        Ext.getCmp('fileid').bodyElement.dom.childNodes[0].childNodes[2].childNodes[1].childNodes[0].childNodes[2].disabled = false;
    }
    else
    {
        btn.setText('Click to set enable');
        Ext.getCmp('fileid').bodyElement.dom.childNodes[0].childNodes[2].childNodes[1].childNodes[0].childNodes[2].disabled = true;
    }
}

Upvotes: 1

Baruch
Baruch

Reputation: 2428

I think what you want to do is use lookup in your ViewController.

You need to add a reference to the button

{
  xtype: 'filefield',
  fieldLabel: 'Attach Items',
  buttonText: 'Browse Items',
  itemId : 'buttonid',
  buttonConfig: {
    id : 'uploadmailwidget0Btn',
  },
  reference: 'myButtonRef'
},

and use that reference in the ViewController to use lookup and change the disable value.

  function() {
    this.lookup('myButtonRef').setDisabled(true);
  }

Granted, I haven't used ExtJS much, but in theory this should work

Upvotes: 1

Related Questions