Ext-GWT/GXT (not so) Problème de mise en page simple?

Question

J'ai posté cette question sur les forums Ext-GWT, j'espère juste que quelqu'un ici pourrait avoir une réponse pour moi!

Je me bats pour faire quelque chose que je pensais au départ était simple, mais je commence à croire qu'il est impossible ...

J'ai un « modèle de mise en page » de toutes sortes - tout simplement composé de quelques années GWT de DockLayoutPanel dans l'autre et enfin se terminant par LayoutPanels. LayoutPanel de GWT est conçu pour dimensionner le widget (ou Composite) qui lui est ajouté à sa taille maximale et le fait parfaitement avec des widgets GWT purs. L'idée de mon "modèle de présentation" est que je ne connais pas la hauteur et la largeur EXACTE du LayoutPanel très interne car je peux définir certaines tailles de panneaux (des DockLayoutPanels externes) différemment lors de l'instanciation de ce modèle. Tout ce que je voudrais, c'est ajouter un composant Grid à l'un des LayoutPanels les plus internes et avoir sa taille (height AND width) pour s'adapter aux widgets GWT normaux (fonctionne parfaitement avec un label GWT par exemple). Je suis très nouveau à GXT (comme je l'ai commencé à l'utiliser plus tôt aujourd'hui) et je me rends compte que GXT construit ses composants différemment de la façon dont GWT construit ses Widgets sur le DOM.

Y a-t-il moyen d'atteindre le résultat souhaité? J'ai essayé d'ajouter la grille à un ContentPanel avec une mise en page de FitLayout, j'ai essayé AnchorLayout, j'ai essayé d'ajouter la grille directement ... Rien ne semble fonctionner ... Tout conseil ou même une poussée dans la bonne direction serait grandement apprécié!

Merci d'avance!

Xandel

Answer 1

Juste une note sur ce poste et la direction que j'ai pris. Quand j'ai commencé mon projet GWT et que j'étudiais les bases et lisais d'autres messages et préoccupations et conseils, le seul conseil que j'avais négligé au début était assez simple - lorsque j'utilise le framework GWT, j'utilise uniquement des composants 100% GWT purs. J'ai d'abord ignoré ces avertissements équitables des autres développeurs car à l'ère des outils open source, et des projets open source, on développe l'esprit de "Au lieu de construire un outil qui me donnera certaines fonctionnalités, laissez-moi voir plutôt si quelqu'un d'autre l'a déjà fait ". Cet état d'esprit accélère le développement et quasi standardise les projets et les méthodes de mise en œuvre.

Cependant, j'ai trouvé au cours des deux derniers mois, que lorsque vous travaillez avec GWT, il est préférable de ne pas suivre ce principe. Peut-être parce que ce n'est pas aussi répandu que d'autres frameworks, ou exige un certain type de codage, mais la recherche d'un composant (simple, triable, chargeable JSON) et d'un composant de forme (validant, soigné) n'a rien à court de cauchemar.

Ce n'est pas parce qu'ils n'existent pas. Ils font. J'ai essayé ext-gwt, gwt-ext, gwt-mosaïque, et gwt-incubateur. C'est parce que la plupart des composants se détachent de la base de mise en page très simple fournie par GWT (en d'autres termes, les panneaux sur lesquels vous placez les widgets doivent principalement être les panneaux fournis avec les outils). Ceci à son tour rend les composants de mélange et obtenir le résultat désiré presque impossible. Ce qui, à son tour, rompt avec la mentalité de «laissez-moi-trouver-un-composant-utile».

Juste un point intéressant et final que je pense pourrait être utile de mentionner. Donc, en raison de ma réalisation du point mentionné ci-dessus, je me suis mis à écrire ma propre grille et les composants de la forme. Ce que j'ai terminé et fonctionne bien pour moi (évidemment, parce que je les ai écrits, je ne pense pas qu'ils seront utiles à tout le monde).Mais en train d'écrire le composant de la grille, et ayant besoin des colonnes pour se dimensionner et s'esquiver automatiquement une fois dessiné dans leur panneau parent, j'ai trouvé que la connaissance de la largeur finale des panneaux n'est pas connue avant d'être dessinée (ceci arrive longtemps après tout votre code s'exécute). Ironiquement, je me suis mis à construire un ensemble de panneaux qui communiquent les uns avec les autres, depuis le panneau parent (qui a finalement besoin d'avoir une connaissance de sa taille) jusqu'aux panneaux les plus internes pour que lorsque mon composant grille soit enfin dessiné, je peux déclenchez une méthode appelée onSizeKnown (largeur int, hauteur int) et faites ce qui est requis. Après avoir terminé cela, je n'ai pu que rire. Parce qu'il est soudainement devenu clair pour moi pourquoi tous les autres composants GWT ont besoin de leurs propres panneaux. Je devais essentiellement faire la même chose pour obtenir ce dont j'avais besoin de travailler. Donc, en bref, si vous êtes un développeur débutant GWT comme je l'étais et que je suis (est?) À la recherche de choses sympas pour rendre votre projet look génial - c'est mon conseil - si vous allez utiliser un cadre externe tel comme certains des mentionnés ci-dessus - utilisez SEULEMENT ce cadre. Ne mélangez pas ses composants avec d'autres frameworks. Apprenez à aimer ce cadre, et construisez votre projet de bas en haut en utilisant leurs panneaux et leurs méthodes de conception. Si cela vous effraie et que vous vous sentez nerveux et limité, faites ce que j'ai fait et écrivez le vôtre en utilisant des composants GWT purs à la vanille. Vous économiserez BEAUCOUP de temps à long terme en suivant ce conseil.

Xandel

Answer 2

• Cette solution est pour GXT 2.2.0 et GWT 2.0.4 *

Alors que l'affiche originale a depuis évolué récemment je suis tombé sur cette question et je pensais que je posterais ma solution au cas où quelqu'un d'autre trébucherait sur ce point.

Il n'y a aucune raison de ne pas pouvoir ajouter une grille GXT directement à un panneau de configuration GWT. Le problème est que l'approche de style/positionnement des deux bibliothèques est en conflit. Fondamentalement, cela se résume au fait que la grille est dimensionnée en fonction de l'attribut height de son parent, qui n'est pas défini, ce qui signifie que le corps de la grille reçoit une hauteur égale à 0 et que la grille présent). Donc, la solution consiste à annuler ce que GXT fait une fois que le flux est passé à GWT. Voici une solution de modèle:

class MyGridWrapper extends Composite { 

    private LayoutPanel widget; 
    private Grid<?> grid; 

    public MyGridWrapper(Grid<? extends ModelData> grid) { 
    this.grid = grid; 

    widget = new LayoutPanel(); 
    initWidget(widget); 

    widget.add(grid); 
    // Set the grid's vertical and horizontal constraints 

    // ... populate the rest of the panel 
    } 

    @Override 
    protected void onLoad() { 
    // onLoad is called after GXT is finished so we can do what we need to 

    // Redo what the LayoutPanel did originally 
    grid.el().setStyleAttribute("position", "absolute"); 
    grid.el().setStyleAttribute("top", "0"); 
    grid.el().setStyleAttribute("bottom", "0"); 
    grid.el().setStyleAttribute("left", "0"); 
    grid.el().setStyleAttribute("right", "0"); 

    // Undo any height settings on the .x-grid3 element 
    El mainWrap = grid.el().firstChild(); 
    assert mainWrap.hasStyleName("x-grid3") : "Wrong Element: " + mainWrap.getStyleName(); 
    mainWrap.setStyleAttribute("height", "auto"); 

    // Undo any height settings on the .x-grid3-scroller element 
    El scroller = grid.el().firstChild().firstChild().getChild(1); // FUN! 
    assert scroller.hasStyleName("x-grid3-scroller") : "Wrong Element: " + scroller.getStyleName(); 
    scroller.setStyleAttribute("height", "auto"); 
    } 
} 

Les assertions sont là pour aider à protéger contre ce qui est évidemment un code très fragile alors méfiez-vous que c'est un géant, bidouille GIANT.

-

• Juste au cas où vous vous demandez où la structure de grille GXT est définie, vous pouvez le trouver dans un fichier de modèle dans le JAR GXT sous com/ExtJS/GXT/ui/client /widget/grid/GridTemplates#master.html

• Jetez un oeil à com.extjs.gxt.ui.client.widget.grid.GridView # renderUI() pour avoir une idée de la façon dont la grille est construite.