How to render all components under a tabpanel?

Question

There is a title window including a 'Ext.tab.Panel' named 'mainTab', add all childrens under it are added dynamic just like below.

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);
    });
}

The xtype of the children is 'jsPlanAppCompTab' or 'jsPlanAppAttrValueCompTab'. the child component is initialized like below, the component listener on 'afterrender' event to initialize data.

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;
}

The problem is when a save the title window, i need to get all children's data. the function getData below is of 'jsVersionWin', in the function, it gets each children's getData function again to get data. if i do not click each child tab, then the child tab component 'JsPlanAppCompTab' don't render,so the function getData of JsPlanAppCompTab is null.

when i click each child tab. then component 'JsPlanAppCompTab' can return the corrent data. How can i let the all children to render, and i can get all correct data without click every child component?

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

Set deferredRender: false on the tabpanel.

Detail see here