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

在tabpanel上设置deferredRender: false。

详情请见here