ExtJS: ajuste dynamiquement mise en page après l'ajout/la suppression de certains champs de formulaire

J'ai la présentation d'un formulaire avec certaines TextField éléments et un HtmlEditor élément. Certains Champs sont des éléments de "masquer", c'est à dire pourrait être caché ou montré. Après masquage/affichage des éléments HtmlEditor instance break layout — il semble vide de l'espace ou d'un élément n'a pas de fin à la bordure de fenêtre.

Est-il possible de dire à HtmlEditor exemple d'utilisation restante de l'espace disponible? Même dans le cas où certains éléments sont caché/montré.

J'ai essayé d'utiliser anchor de la propriété, mais il fonctionne bien jusqu'à ce que certains éléments supprimés à partir de la mise en page.

Mis à jour
Voici un exemple de code:

var htmlEditor = new Ext.form.HtmlEditor({
    anchor: '100% -54',
    hideLabel: true
});

var fp = new Ext.form.FormPanel({
    items: [{xtype: 'textfield', fieldLabel: 'zzz', mode: 'local'}, 
            {xtype: 'textfield', fieldLabel: 'nnn', id: 'id-one', mode: 'local'},
        htmlEditor]
});

var w = new Ext.Window({layout: 'fit',
    height: 400, width: 600,
    tbar: [{text: 'click',
        handler: function() {
            //hide element
            Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false);
            w.doLayout();
        }
        }],
    items: fp   
});

w.show();

Exécuter, cliquez sur bouton de barre d'outils ", cliquez sur", un champ doit disparaître, puis regardez dans le vide au-dessous de htmleditor.

InformationsquelleAutor Sergey Stolyarov | 2009-11-11

extjs javascript

7

Lorsque vous ajoutez/supprimez des composants d'un conteneur, vous devez appeler le Conteneur.doLayout() pour l'avoir à recalculer les dimensions.

[EDIT]: Notez que cela s'applique uniquement aux Ext <= 3.x. En 4.x le système de disposition gère pour vous. Bien que la méthode est toujours là, vous ne devriez jamais avoir à l'utiliser.
- Il ne l'aide pas en fait. Lorsqu'un élément est juste caché, il est vide de l'espace ci-dessous HtmlEditor (ou textarea).
- Mon commentaire suppose que (Un) vos widgets sont mis en place avec le bon ancrage, et (B) tous les conteneurs imbriqués ont une disposition appropriée configuré. Si vous avez d'autres trucs à configurer correctement alors doLayout() ne va pas aider, mais puisque vous n'avez pas poster tout le code qu'il est impossible de dire ce que le problème peut être.
- Une chose de plus, en supposant que vous avez quelques compliqué application de mise en page, pour résoudre ce problème, vous devez le code d'un simple cas de test avec un non-imbriquées FormPanel et juste assez de champs et la mise en page de code pour tester votre scénario. Une fois que vous avez que de travail, il sera plus facile de comprendre ce que vous pourriez avoir besoin pour votre changement de code de l'application. Votre cas est tout à fait réalisable que j'ai fait exactement la même chose avant.
- Juste ajouté un exemple de code. Aussi j'ai trouvé la solution mais ça marche pas très bien. En quelques mots, lorsque le masquage de l'élément de modifier anchor propriété et le vide anchorSpec propriété de htmlEditor.
InformationsquelleAutor Brian Moeskau
4

[Nouvelle réponse afin que je puisse formater le code]

Une approche serait de faire de votre extérieur mise en page quelque chose de plus conçu pour faire ce que vous voulez, comme, disons, un BorderLayout nord (votre top des champs) et le centre (l'éditeur html). De cette façon, le html de l'éditeur pourrait simplement être fixé à 100% de la hauteur de son contenant (la région centre). Dans ce cas, puisque la mise en page serait bien gérés, mon précédent doLayout() conseil devrait fonctionner.

Si vous voulez vraiment gérer les champs en dehors d'une mise en page qui va vous aider à le faire, alors ce sera à vous de gérer les hauteurs manuellement. La modification de la propriété anchor est une façon d'aller. La façon dont je l'ai fait dans le passé (et il est plus préférable) est à écouter à un événement approprié et définir la taille des composants selon les besoins. Ainsi, par exemple, vous pouvez ajouter un redimensionnement de l'auditeur à la fenêtre:
```
    listeners: {
        'resize': function(){
            Ext.getCmp('my-htmleditor').setHeight(w.getEl().getHeight()-110);
        }
    }
```
À l'aide de votre code de test, cela vous arrive assez proche. Cependant, dans le code réel, vous voulez à réellement obtenir la hauteurs de vos composants visibles et soustrait ce nombre, plutôt que de coder en dur, mais vous obtenez l'idée. Une façon de rendre cette approche plus simple est d'ajouter votre top des champs à un Panneau séparé qui est autoHeight:true, puis après affichage ou masquage des champs, il suffit de mesurer la hauteur du Panneau et de la soustraire à la hauteur de la fenêtre (plus les marges/padding) pour obtenir votre éditeur html hauteur (c'est ce que j'ai fait dans le passé quand je ne pouvais pas compter sur une mise en page pour les gérer).

Comme vous pouvez le voir, il existe de nombreuses façons de la peau, ce chat, de sorte que vous pouvez choisir l'approche qui vous convient le mieux.

InformationsquelleAutor Brian Moeskau
1

essayez de mettre ce Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); à l'intérieur de la fenêtre afterlayout événement et en y ajoutant une condition qu'il n'y...

comme ceci:
```
'afterlayout': function() {
   <condition> {
       Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false);
   }
}
```
espérons que cette aide!

InformationsquelleAutor ampnezz
1

utilisation autoHeight:true et la fenêtre est redimensionnée pour s'adapter à l'conteneur.

InformationsquelleAutor Lolita
-1

vous devez utiliser la "visibilité" de la propriété de l'élément. Le truc, c'est que même les éléments invisibles prend de la place sur la page.
```
object.style.visibility="hidden"
```
InformationsquelleAutor Dani Cricco

Vous devez vous connecter pour publier un commentaire.