Question

我遇到了一个我无法解决的问题。这是我的目标：我想将动态标签添加到TabPanel。我创建了自己的组件EmpruntsTabPanel() 当我创建它时，我只需要给出一个数组并EmpruntsTabPanel()创建count（数组））选项卡。这非常有效。所以我做了另一个组件DossierPanel。

这一个，一旦加载，就会动态创建EmpruntsTabPanel()。这非常有效。呃嗯。这完全适用于第一次它的加载。我已经制作了一个按钮来重新加载DossierPanel（请参阅下面的代码）。我将完全 相同的代码调用（因为它在同一个事件中），我检查过：它是相同的网址，结果是一样的。所以：

为什么第一次有效，如果reload没有？
相反，如果有效的话第一次，为什么不第二次？

这可能与代码

            var res = action.result;
            var tab = Ext.getCmp('tab_emprunts_'+this.id_dossier);
            tab.removeAll(true);
            tab.add( new EmpruntsTabPanel( res.data.emprunts ) );

这是我的组件（为清晰起见，我删除了很多textfield组件）：

DossierPanel = Ext.extend(Ext.form.FormPanel, {
    closable: true,
    autoScroll:true,

    initComponent : function(){
        var n = this.id_dossier;
        this.title = n;
        this.id = 'id_dossier_'+this.id_dossier;
        this.bodyStyle = 'padding:15px';
        this.labelWidth = 150;
        this.items = [{
            xtype:'tabpanel',
            plain:true,
            activeTab: 0,
            /* (!) Pour qu'un onglet qui n'est pas affiché soit
             * quand même calculé, il faut faire :
             * deferredRender: false
             * C'est très important lorsqu'on fait des fiches
             * avec plusieurs onglets.
             */
            deferredRender: false,
            defaults:{bodyStyle:'padding:10px'},
            items:[{
                title:'Détails personnels',
                layout:'form',
                autoHeight: true,
                defaults: {width: '99%'},
                defaultType: 'textfield',
                items: [{
                    xtype:'datefield',
                    fieldLabel: 'Date premier contact&nbsp;',
                    name: 'DATE1ERCONTACTJMA',
                    readOnly: true,
                    format:'d/m/Y'
                }]
            },{
                title:'Adresse',
                layout:'form',
                autoHeight: true,
                defaults: {width: '95%'},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'Adresse 1&nbsp;',
                    name: 'ADRESSE1'
                }]
            },{
                id: 'tab_emprunts_'+this.id_dossier,
                title:'Emprunts',
                layout:'form',
                autoHeight: true,
                defaults: {width: '99%'},
                defaultType: 'textfield',
                items: []
            }]
        }];
        this.buttonAlign = 'left';
        this.buttons = [{
            text: 'Recharger',
            handler: function() {
                this.getForm().load( {
                  url: '/ws/cellulemedicale/jsonEditDossier.php',
                  params: {
                      id_dossier: this.id_dossier
                  },
                  waitTitle: 'Patientez',
                  waitMsg: 'Rafraichissement',
                  failure:function(form, action) {

                  },
                  scope: this
                } );
            },
            scope: this
        }];
        this.on('actioncomplete', function (form,action) {
            if (action.type=='load') {
                if(typeof action.result != 'undefined') {
                    console.log( 'load finished' );
                    console.log( res.data.emprunts );
                    var res = action.result;
                    var tab = Ext.getCmp('tab_emprunts_'+this.id_dossier);
                    tab.removeAll(true);
                    tab.add( new EmpruntsTabPanel( res.data.emprunts ) );
                }
            }
        });

        DossierPanel.superclass.initComponent.call(this);
    }
});

Answer 1

初始加载的代码在哪里？

console.log( res.data.emprunts ); 之前您声明var res = action.result;这是正确的吗？（您可能没有在日志中看到真实结果）

在高级别，如果某些内容在加载时按预期工作但在所有内容都没有呈现之后，我会查看是否需要在从表单执行remove / add magic后调用form/container .doLayout()。

如果有帮助，请告诉我。

ExtJS和FormPanel：重新加载不起作用（通过相同的代码）

1 个答案: