Comment définir la hauteur automatique pour la présentation extjs hbox ?

Question

J'ai cette mise en page et une fois que j'ai défini certaines données dynamiquement, la mise en page ne se redimensionne pas et le résultat final est comme ceci

Voici le code que j'utilise

win = Ext.create('widget.window', {
      title: 'Layout Window',
      closable: true,
      closeAction: 'hide',
      width: 750,
      height: 500,
      layout: 'fit',
      animCollapse: true,
      bodyPadding: 5,

      items: [{
                xtype: 'container',
                layout: 'hbox',
                align: 'stretch',
                items: [{
                          xtype: 'fieldset',
                          flex:1,
                          title: 'Details',
                          margins:'0 5 0 0',
                          layout: 'anchor',                          
                          autoHeight: true,
                          items: [{
                                    xtype: 'displayfield',
                                    fieldLabel: 'Name',
                                    name: 'customer_name',
                                    id: 'customer_name',
                                    width: 300
                                },{
                                    xtype: 'displayfield',
                                    fieldLabel: 'ID Card',
                                    id: 'customer_id',
                                    name: 'customer_id',
                                    width: 300
                                },{
                                    xtype: 'displayfield',
                                    fieldLabel: 'Address',
                                    name: 'address',
                                    id: 'address',
                                    width: 300
                                }]                        
                      },{
                          xtype: 'fieldset',
                          title: 'Details',
                          margins:'0 0 5 0',
                          flex:1,
                          layout: 'anchor',
                          autoHeight: true,
                          items: [{
                                    xtype: 'textfield',
                                    labelWidth: 120,
                                    fieldLabel: 'invoice',
                                    anchor: '98%',
                                    name: 'invoice_number',
                                    id: 'invoice_number',
                                    allowBlank: false,
                                    readOnly: true
                                },{
                                    xtype: 'textfield',
                                    labelWidth: 120,
                                    fieldLabel: 'Payment Amount',
                                    anchor: '98%',
                                    name: 'payment_amount',
                                    id: 'payment_amount',
                                    allowBlank: false
                                },{
                                    xtype: 'button',
                                    id: 'test'

                                    }]                        
                      }]                        
             }]

}).show();

Je l'ai juste utilisé pour définir les données à afficher dans les champs en tant que test.

Ext.getCmp('test').on('click', function(){
    Ext.getCmp('customer_name').setValue('customer name customer_name customer_name customer_name');
    Ext.getCmp('customer_id').setValue('855');
    Ext.getCmp('address').setValue('some text, some text, some text, some text');
});

Une idée sur la manière de résoudre ce problème ?

Salutations

Answer 1

Tout d'abord, voici la petite astuce qui vous permettra de faire en sorte que vos champs à gauche s'agrandissent automatiquement en fonction de la longueur du contenu :

Juste après avoir défini le contenu du champ d'affichage, procédez comme suit :

win.query('fieldset')[0].setHeight('auto');

Sans grande modification, voici l'exemple : jsfiddle

( query est une méthode disponible globalement pour tous les composants qui héritent de Ext.Component pour interroger les éléments situés en dessous, comme les sélecteurs css)

Note supplémentaire

Quelques points à noter :

1. Pour utiliser align:'stretch' Si vous n'êtes pas en mesure de fournir une configuration directe au composant, vous devrez procéder de la manière suivante :

   Ext.create('Ext.panel.Panel', {
       layout: {
           type: 'hbox',
           align: 'stretch'
       },
       items: [...]
   });

   Vous voudrez Découvrez cette démo d'essai . La première fenêtre fonctionne comme prévu, tandis que les deuxième et troisième fenêtres ne parviennent pas à étirer les panneaux.

2. Deuxièmement, autoHeight a été abandonné depuis ExtJS 4 et est donc ignoré dans votre configuration. Vous devez probablement utiliser l'option setHeight('auto') pour le rendre autoHeight manuellement.

EDIT

Il semble que l'utilisation de column La mise en page peut avoir le même effet sans utiliser setHeight('auto') . Découvrez le violon ici .

Santé !