CODEWITHSUNDEEP
javascriptextjs
Veds
Veds

Reputation: 11

EXT JS: How to hide the fourth tab of the item based on some if condition?

I am new to ext js and I am trying to hide the fourth tab on my screen based on certain entity condition. As, I have coded I am able to disable (blur) the 4th Setting tab, but the hidden or hide() function is failing.

Basically, I want to hide the fourth tab in items Payment.PaymentSettingsCfg on certain condition. Any help would really appreciate, thanks in advance. 

var bsdataloded = false;
Payment.PaymentSettingsCfg = {
  id: 'PaymentSettingsPanel',
  title: getMsg('PaymentAdmin', 'PaymentSettingsHeader'),
  xtype: 'PaymentSettingsPanels',
  listeners: {
    activate: function() {
      if (!bsdataloded) {
        this.loadSettings();
        bsdataloded = true;

      }
    }
  }

}
var hidePaymentSettingcfg = false;
debugger;
if (Payment.EntitySettings &&
  Payment.EntSettings["EntSITE|Payment_SWitch"] === "Y") {
  Payment.PaymentSettingsCfg.disabled = true; //working
  // Payment.PaymentSettingsCfg.hidden  = true;// not working, even hide() not working
  hidePaymentSettingcfg = true;

}
init: function() {
  Ext.QuickTips.init();
  Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: null
  }));

  app = new Payment.admin.AppContainer({
    id: 'main-panel',
    title: Payment.getMsg('PaymentAdmin', 'PaymentConfHeader'),
    el: 'bodydiv',
    border: true,
    layout: 'fit',
    defaults: {
      border: false
    },
    items: [{
      xtype: 'tabpanel',
      activeTab: 0,
      width: 500,
      deferredRender: false,
      hidden: false,
      defaults: {
        border: false
      },
      items: [
        Payment.PaymentItemCfg,
        Payment.PaymentPeriodCfg,
        Payment.PaymentTypeCfg,
        Payment.PaymentSettingsCfg
      ]
    }]
  });
  app.render();
}

};
}();

Upvotes: 0

Views: 612

Answers (2)

Veds
Veds

Reputation: 11

Added the logic to the listeners and it worked.

listeners : { afterrender : function(){

var testTab = this.getTabEl(3);
if (Payment.EntSettings["EntSITE|Payment_SWitch"] === "Y") {
    testTab.hide();
}

}

}

Upvotes: 0

Salman hassan
Salman hassan

Reputation: 398

Here is the example to hide and show the tab based on if condition
i am hiding and showing the tab on checkbox checking but you can get your idea
i hope it will help you
here is the Fiddle...

Upvotes: 1

Related Questions