2009-10-03 5 views
1

J'utilise Ext-GWT et je pense que ListView est la bonne mise en page pour ce dont j'ai besoin. Mon problème est que je dois utiliser un modèle HTML pour tous mes éléments, mais je veux construire des widgets GWT/Ext-GWT à la place, donc j'utilise des espaces réservés div que je vais remplacer par les widgets appropriés. Comment remplacer mon div avec un widget? Ma première tentative a été d'utiliser RootPanel.get('div-id'), mais apparemment, vous ne pouvez pas créer un RootPanel dans un widget (j'ai utilisé le mode débogage pour parcourir le code jusqu'à ce que je trouve cette exception silencieuse).Comment puis-je remplacer un div par un widget lorsqu'il est déjà contenu dans un autre widget?

public class TicketContainer extends LayoutContainer { 

    private ArrayList<BasicTicket> tickets; 

    public TicketContainer(ArrayList<BasicTicket> tickets) { 
     this.tickets = tickets; 
    } 

    @Override 
    protected void onRender(Element parent, int index) { 
     super.onRender(parent, index); 
     setLayout(new FlowLayout(1)); 

     ListStore<BasicTicket> store = new ListStore<BasicTicket>(); 
     store.add(this.tickets); 

     ListView<BasicTicket> view = new ListView<BasicTicket>(store); 

     view.addListener(Events.Refresh, new Listener<BaseEvent>() { 

      @Override 
      public void handleEvent(BaseEvent be) { 
       for (BasicTicket ticket : tickets) { 
       // At this point I need to find the div with the id 
       // "ticket_"+ticket.getId() and replace it with a GWT 
       // widget that I can add events to and enable drag and drop 
       } 
      } 
     }); 

     add(view); 

    } 

    private native String getTemplate() /*-{ 
     return ['<tpl for=".">', 
     '<div id="ticket_{id}"></div>', 
     '</tpl>'].join(""); 
    }-*/; 

} 

La source complète est à https://code.launchpad.net/~asa-ayers/+junk/Kanban si vous avez besoin un contexte supplémentaire dans le code.

Répondre

2

Dans GWT « pure », la réponse serait d'utiliser HTMLPanel:

String id = DOM.createUniqueId(); 
HTMLPanel panel = new HTMLPanel("<div class=\"content\" id=\"" + id + "\"></div>"); 

panel.add(new Label("Something cool"), id); 

Comme vous pouvez le voir, l'com.google.gwt.user.client.ui.HTMLPanel.add(Widget, String) prend l'identifiant d'un élément withing la HTMLPanel et place le Widget dans cet élément.

Je n'ai pas utilisé Ext-GWT, mais vous pouvez utiliser HTMLPanel ou rechercher un exquivalent dans Ext-GWT.

+0

Dans ma situation, je ne peux pas utiliser un objet GWT pur car je ne peux pas appeler add() sur quoi que ce soit. Je dois passer un template et Ext-GWT remplit les variables et dépose mon html sur la page. Je cherche un moyen de prendre ce HTML après qu'il soit sur la page et soit de mettre un HTMLPanel à l'intérieur, ou pour envelopper le panneau autour d'elle. –

+0

Mon mauvais alors - je pensais que GXT était plus semblable à GWT. Alors qu'en est-il de LayoutContainer.getItemByItemId? Après avoir obtenu le composant à cet id, vous pouvez utiliser indexOf et insert pour remplacer le composant. Je ne peux pas vraiment tester cette atm, mais il semble que ce soit ce que vous cherchez. –

0

Vous pouvez également envelopper une div existante dans un panneau HTML.

HTMLPanel newPanel = HTMLPanel.wrap(Document.get().getElementById("yourDivId")); 
newPanel.add(your_widget); 
Questions connexes