ExtJS、FormPanel 和 TabPanel 组件：post 未发送所有字段

Question

这是我的问题：只要不显示选项卡，选项卡中包含的数据就不会发送。如果我单击一个选项卡，数据就会添加到“堆栈”中，并通过 post 事件发送。 （见代码） 我不明白的是我正在使用“deferredRender：false”。这似乎是唯一可以用来“强制”场计算的东西。我不知道我错过了什么，但我错过了一些东西。 谁能帮助我吗？

多谢。

这是 DossierPanel 类的完整源代码（有效）：

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

    initComponent : function(){
        var n = this.id_dossier;
        if (this.nom) {
            n += ' '+this.nom
        }
        if (this.prenom) {
            n += ' '+this.prenom;
        }
        this.title = n;
        this.id = 'id_dossier_'+this.id_dossier;
        this.bodyStyle = 'padding:15px';
        this.labelWidth = 150;
        this.items = [{
            layout:'column',
            border:false,
            autoHeight: true,
            items:[{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Civilite ',
                    name: 'CIVILITE',
                    readOnly: true
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Nom ',
                    name: 'NOM',
                    anchor:'95%'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Prenom ',
                    name: 'PRENOM',
                    anchor:'95%'
                }]
            },{

                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'RaisonSociale ',
                    name: 'RAISONSOCIALE',
                    anchor:'95%'
                },{
                    xtype:'textfield',
                    fieldLabel: 'Email ',
                    name: 'EMAIL',
                    vtype:'email',
                    anchor:'95%'
                }]
            }]
        },{
            xtype:'tabpanel',
            plain:true,
            activeTab: 0,
            /* (!) For a tab to force calculation, I use
             * deferredRender: false
             * It's very important for Form with multiple Tabs
             */
            deferredRender: false,
            defaults:{bodyStyle:'padding:10px'},
            items:[{
                title:'Détails personnels',
                layout:'form',
                autoHeight: true,
                defaults: {width: '99%'},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'Poids ',
                    name: 'POIDS',
                    readOnly: true
                }, {
                    xtype:'datefield',
                    fieldLabel: 'Date premier contact ',
                    name: 'DATE1ERCONTACTJMA',
                    readOnly: true,
                    format:'d/m/Y'
                }, {
                    xtype:'datefield',
                    fieldLabel: 'Date étude dossier ',
                    name: 'DATEDATE_ETUDE_DOSSIERJMA',
                    format:'d/m/Y'
                }]
            },{
                title:'Adresse',
                layout:'form',
                autoHeight: true,
                defaults: {width: '95%'},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'Adresse 1 ',
                    name: 'ADRESSE1'
                }, {
                    fieldLabel: 'Pays ',
                    name: 'PAYS',
                    readOnly: true
                }]
            },{
                title:'Téléphone(s)',
                layout:'form',
                autoHeight: true,
                defaults: {width: 230},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'NoTelephone2 ',
                    name: 'NOTELEPHONE2',
                }, {
                    fieldLabel: 'DescTelephone3 ',
                    name: 'DESCTELEPHONE3',
                    readOnly: true
                }, {
                    fieldLabel: 'NoTelephone3 ',
                    name: 'NOTELEPHONE3',
                }]
            },{
                title:'Divers',
                layout:'form',
                autoHeight: true,
                defaults: {width: 230},
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'Mot de passe Internet ',
                    name: 'MOTDEPASSE'
                }, {
                    fieldLabel: 'Parts ',
                    name: 'PARTS'
                }, {
                    fieldLabel: 'Commission ',
                    name: 'COMMISSION'
                }]
            },{
                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: 'Wait',
                  waitMsg: 'Refresh',
                  failure:function(form, action) {
                        globGestionErreurAjax(action.response,'Refresh error');
                  }
                });
            },
            scope: this
        },{
            text: 'Sauver',
            handler: function() {
                this.getForm().submit({
                    url: '/ws/cellulemedicale/jsonEditDossier.php',
                    params: {
                        write: 1,
                        id: this.id_dossier
                    },
                    waitTitle: 'Wait...',
                    waitMsg: 'Saving',
                    success: function (form, action) {
                      var b = Ext.util.JSON.decode(action.response.responseText);
                      if (b.success==true) {
                          if (b.msg) {
                              Ext.MessageBox.alert('Done!', b.msg);
                          }
                          else {
                              Ext.MessageBox.alert('Done!', 'Saved ok');
                          }
                      }
                    },
                    failure:function(form, action) {
                        globGestionErreurAjax(action.response,'Save error');
                    }
                });
            },
            scope: this
        }];
        this.on('actioncomplete', function (form,action) {
            if (action.type=='load') {
                console.log(action.result.data.emprunts);
                if(typeof action.result != 'undefined') {
                    if(typeof action.result.data != 'undefined') {
                        if(typeof action.result.data.emprunts != 'undefined') {
                            /* For now, use the id, this may be ugly:
                             */
                            var tab = Ext.getCmp('tab_emprunts_'+this.id_dossier);
                            tab.removeAll(true);
                            var nt = new EmpruntsPanel(action.result.data.emprunts);
                            tab.add(nt);
                        }
                    }

                    }
                }
            }
        });

        DossierPanel.superclass.initComponent.call(this);
        console.log(this.events)
    }
});

Answer 1

如何将 forceLayout: true 配置属性添加到每个选项卡或选项卡面板本身？

我希望这会导致计算字段。

Answer 2

我认为您需要将其包含

defaults: { hideMode: 'offsets' }

在选项卡面板中。

Answer 3

我认为你需要设置 is Dirty = true

{ xtype: 'textfield', name: 'name' ,readOnly:true ,submitValue: true ,isDirty: function() { return true;} }