Search code examples
ibm-mobilefirstdojodojox.mobile

Dojo: How to disable a TabBarButton?


How can I disable a TabBarButton? I want it to be unclickable and gray.

There isn't any parameter to set it in the guide. https://dojotoolkit.org/reference-guide/1.9/dojox/mobile/TabBarButton.html

    createFooter : function() {

       this.inherited(arguments);

       this.footer = new Footer({}, this.footerNode);

       this.settingsBtn = new TabBarButton(
         {
          clickable:false,
          icon : "images/settingsIcon.png",
         }, domConstruct.create("li"));

       this.footer.addChild(this.settingsBtn);

       this.settingsBtn.onClick = lang.hitch(this, "settings");

      },

      settings : function() {

       alert("settings started");

    }

Solution

  • I created my own widget, because this wasn't default functionality of a tabbarButton. Here is my code:

        define([
            "dojo/_base/declare",
            "dojo/_base/lang",
            "dojo/on",
            "dojo/dom-class",
            "dojox/mobile/TabBarButton"
        ], function(declare, lang, on, domClass, TabBarButton) {
            return declare("TabBarButtonDisable",[TabBarButton], {
    
                onClickBackup:null,
                isDisabled : false,
    
    
                _setIsDisabledAttr : function(isDisabled) {
                    this.isDisabled = isDisabled;
                    this.renderIsDisabled();
                },
                _getIsDisabledAttr : function() {
                    return this.isDisabled;
                },
    
                renderIsDisabled : function() {
                    if (this.isDisabled) {
                        domClass.add(this.domNode, "disabled");
                        this.onClick = function(){
                    // isDisabled
                        };
                    } else {
                        domClass.remove(this.domNode, "disabled");
                        this.onClick = this.onClickBackup;
                    }
                },
    
                buildRendering : function() {
                    this.inherited(arguments);
                    this.onClickBackup = this.onClick;
                },
    
                postCreate: function() {
                    this.inherited(arguments);
                }
    
            });
        });