Ext动态控制tab菜单置灰

• 项目描述：
  项目前端界面用Ext.js实现的，今天要开发一个保护组的功能。要求：没有配置保护组时，保护倒换等操作tab置灰，不让操作。配置了保护组后，保护倒换等操作tab可以正常操作。

• 没有保护组时，保护倒换等操作tab置灰，如图所示：
  

• 创建了保护组后，保护倒换等操作tab可以正常操作，如图所示：
  

• 菜单说明：172.16.61.63网元下面有OPCOM100-CPM6DX2、OPCOM100-CPM12D等板卡。CPM6DX2与CPM12D是两种不同的板卡类型，他们的保护倒换等操作tab菜单配置的对应页面不同。
  

• CPM6DX2菜单配置：
  

• CPM12D菜单配置：

• 注意：虽然CPM6DX2和CPM12D这两种板卡的“保护倒换APS”菜单对应的页面都是：Admin.view.ems.otn.emsBasicMgt.protectionSwitching.mainView.view
  但是name属性的值是不一样的。CPM6DX2叫cpmx2ProtectionSwitchingAPS，CPM12D叫protectionSwitchingAPS。
  

• 实现原理：
  获取“保护倒换APS”这个菜单对应的页面，然后获取其所有的tab菜单，设置tab的disabled属性即可。
  CPM6DX2和CPM12D这两种板卡的“保护倒换APS”菜单对应的页面都是：
  Admin.view.ems.otn.emsBasicMgt.protectionSwitching.mainView.view
  页面的xtype属性为：otnProtectionSwitchingView
  获取otnProtectionSwitchingView页面的代码为：
  let tabPanelArr = Ext.ComponentQuery.query("otnProtectionSwitchingView");
tabPanelArr 是一个数组，CPM6DX2和CPM12D加载后各有一条数据。
  我刚开始用：let tabPanel = Ext.ComponentQuery.query("otnProtectionSwitchingView")[0];
  导致只有一张板卡的tab菜单置灰生效。

• Ext.ComponentQuery.query(“otnProtectionSwitchingView”);数组如图所示：
  

• 在保护组配置的viewController.js的onRefresh方法和onSelectionchange 方法中调用isDisabledTopTab()方法。

• 控制tab菜单置灰和放开的方法如下：

  //如果该板卡没有创建保护组置灰所有tab
  isDisabledTopTab() {
      let me = this,
          v = me.view,
          vm = v.viewModel,
          neId = APP.EMS.neId,
          cardId = APP.EMS.selectedCardId,
          fixedCardTypeId = APP.EMS.selectedFixedCardTypeId;
  
      let url = '/tiap_ems_basic_mgt/tiap_ems_basic_mgt/v1/protectgroup/queryPage',
          method = 'POST',
          params = {
              "neId": neId,
              "cardId": cardId
          },
          successFn = function (r) {
              //非CPM6DX2菜单name值
              let viewModelKey = 'protectionSwitchingAPS';
              //OPCOM100-SA2、OPCOM100-SA3、OPCOM100-SA5的OPCOM100-CPM6DX2
              if(fixedCardTypeId == '8170000000243' || fixedCardTypeId == '8180000000243' || fixedCardTypeId == '8190000000243') {
                  //CPM6DX2菜单name值
                  viewModelKey = 'cpmx2ProtectionSwitchingAPS';
              }
  
              let tabPanelArr = Ext.ComponentQuery.query("otnProtectionSwitchingView");
              let tabPanel = tabPanelArr[0];//默认取第一个
              for (let i = 0; i < tabPanelArr.length; i++) {
                  let tabViewModelKey = tabPanelArr[i].viewModelKey;
                  if(tabViewModelKey == viewModelKey){
                      tabPanel = tabPanelArr[i];
                      break;
                  }
              }
  
              let tabs = tabPanel.query('tab');
              if(r.total == 0){
                  let num = 1;
                  for (let i of tabs) {
                      if(num != 1){
                          i.setDisabled(true);
                      }
                      num ++;
                  }
              }else{
                  for (let i of tabs) {
                      i.setDisabled(false);
                  }
              }
          };
      CommonUtils.onCommonAjax(url, method, params, successFn);
  }