Как визуализировать все компоненты под вкладкой?

Question

В окне заголовка есть «Ext.tab.Panel» с именем «mainTab», добавьте под него все дочерние элементы, добавленные динамически, как показано ниже.

JsVersionWin.js

createPlanAppTab: function (planId) { 
    var me = this; 
    var tab = me.down("tabpanel#mainTab"); 
    me.action.qryJsPlanAppListEdit(planId, function (result) { 
     if (Ext.isEmpty(result)) { 
      return; 
     } 

     var tabList = []; 
     result.forEach(function (planAppExDto, index) { 
      var typeCode = planAppExDto.typeCode; 
      // was,docker 
      if (JsServiceConstants.TYPE_CODE_WAS == typeCode || JsServiceConstants.TYPE_CODE_DOCKER == typeCode) { 
       tabList[index] = { 
        xtype: 'jsPlanAppCompTab', 
        title: planAppExDto.appName, 
        border: false, 
        closable: true, 
        planAppExDto: planAppExDto 
       } 
      } 
      // other app 
      else { 
       tabList[index] = { 
        xtype: 'jsPlanAppAttrValueCompTab', 
        title: planAppExDto.appName, 
        border: false, 
        closable: true, 
        planAppExDto: planAppExDto 
       } 
      } 
     }); 

     tab.add(tabList); 
     tab.setActiveTab(0); 
    }); 
} 

xtype детей является 'jsPlanAppCompTab' или 'jsPlanAppAttrValueCompTab'. дочерний компонент инициализируется, как показано ниже, прослушиватель компонентов в событии «afterrender» для инициализации данных.

JsPlanAppCompTab.js

initComponent: function() { 
    var me = this; 

    me.on({ 
     'afterrender': { 
      fn: me.initData, 
      scope: this, 
      single: true 
     } 
    }); 

    this.callParent(); 
}, 

initData: function() { 
    var me = this; 

    var planAppExDto = me.planAppExDto; 
    var planAppId = planAppExDto.planAppId; 
    // edit：attr_value 
    var attrForm = me.down('ztesoftSmartForm#attrForm'); 
    if (!Ext.isEmpty(planAppId)) { 
     var action = Ext.create("ZTEsoft.action.JsVersionAction"); 
     action.qryJsPlanAppAttrValueList(planAppId, function (result) { 
      attrForm.loadConfig(result); 
     }); 
    } 
    // add : query js_app_type_attr for initialize 
    else { 
     var typeAction = Ext.create("ZTEsoft.action.JsAppTypeAction"); 
     var appTypeId = planAppExDto.appTypeId; 
     typeAction.qryJsAppTypeAttrListByAppTypeIdForm(appTypeId, function (result) { 
      attrForm.loadConfig(result); 
     }); 
    } 
}, 

getData: function() { 
    var me = this; 
    var attrForm = me.down('ztesoftSmartForm#attrForm'); 
    var jsPlanAppExDto = me.planAppExDto; 

    var attrValueList = attrForm.getData(); 
    if (!Ext.isEmpty(attrValueList)) { 
     attrValueList.forEach(function (item) { 
      item.value = item.attrValue; 
     }) 
    } 
    jsPlanAppExDto.jsPlanAppAttrValueList = attrValueList; 
    return jsPlanAppExDto; 
} 

Проблема в том, когда сохранить окно заголовка, мне нужно получить данные всех детей. функция getData ниже имеет значение «jsVersionWin», в функции она снова получает функцию getData каждого ребенка для получения данных. Если я не нажимаю на каждую дочернюю вкладку, то компонент дочерней вкладки 'JsPlanAppCompTab' не отображает, поэтому функция getData из JsPlanAppCompTab имеет значение NULL.

, когда я нажимаю на каждую дочернюю вкладку. то компонент «JsPlanAppCompTab» может возвращать данные. Как я могу позволить всем детям визуализировать, и я могу получить все правильные данные без щелчка каждого дочернего компонента?

JsVersionWin.js

// This is the problem place!! 
getData: function() { 
    var me = this; 

    // plan app list 
    var planAppExDtoList = []; 
    var tab = me.down("tabpanel#mainTab"); 
    tab.items.each(function (item) { 
     var planAppExDto = item.getData(); 
     planAppExDtoList.push(planAppExDto); 
    }); 
    versionReqDto.jsPlanAppExDtoList = planAppExDtoList; 

    return versionReqDto; 
} 

Answer 1

Набор deferredRender: false на tabpanel.

Detail см here