javascript - 如何渲染一个tabpanel下的所有组件？

Question

有一个标题窗口，其中包括一个名为“mainTab”的“Ext.tab.Panel”，添加其下的所有子窗口都是动态添加的，如下所示。

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'，在该函数中，它再次获取每个 child 的getData函数来获取数据。如果我不单击每个子选项卡，则子选项卡组件“JsPlanAppCompTab”不会呈现，因此 JsPlanAppCompTab 的函数 getData 为空。

当我单击每个子选项卡时。那么组件“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。

详情见here