title: Understanding wxWidgets sizers
body: <p>I'm still getting used to the sizers in wxWidgets, and as such can't seem to make them do what I want.</p>
  
  <p>I want a large panel that will contain a list of other panels/boxes, which each then contain a set of text fields</p>
  
  <pre><code>----------------------
  | label    text box  |
  | label2   text box2 |
  ----------------------
  ----------------------
  | label    text box  |
  | label2   text box2 |
  ----------------------
  ----------------------
  | label    text box  |
  | label2   text box2 |
  ----------------------
  </code></pre>
  
  <p>I also need to be able to add (at the end), and remove(anywhere) these boxes.
  If there's too many to fit in the containing panel a vertical scroll bar is also required.</p>
  
  <p>This is what I've tried so far, it works for the first box that's created with the containing panel, but additional added items are just a small box in the top left of the main panel, even though the sizer code is the same for all boxes.</p>
  
  <pre><code>//itemsList is a container containg a list of *Item pointers to each box/panel/whatever the right name is
  Items::Items(wxWindow *parent)
  :wxPanel(parent, wxID_ANY, wxDefaultPosition, wxDefaultSize, wxBORDER_SUNKEN)
  {
      //one sstarting item
      OnAdd(wxCommandEvent());
  }
  
  void Items::OnAdd(wxCommandEvent &amp;event)
  {
      unsigned id = itemsList .size();
      Item *item = new Item(this,id);
      itemsList .push_back(item);
  
      RebuildSizer();
  }
  void Items::RebuildSizer()
  {
      this-&gt;SetSizer(0,true);
      wxBoxSizer *sizerV = new wxBoxSizer(wxVERTICAL);
  
      for(std::vector&lt;Item*&gt;::iterator it = itemsList .begin(); it != itemsList .end(); ++it)
          sizerV-&gt;Add(*it, 1, wxEXPAND | wxLEFT | wxRIGHT, 5);
  
      SetSizer(sizerV);
  }
  void Items::OnRemove      (wxCommandEvent &amp;event, unsigned itemId)
  {
      delete itemsList [itemId];
      itemsList .erase(items.begin()+itemId);
      for(std::vector&lt;Item*&gt;::iterator it = itemsList .begin()+itemId; it != itemsList .end(); ++it)
          (*it)-&gt;ChangeId(itemId++);
  
      RebuildSizer();
  }
  </code></pre>
  
  <p>Also what's the best way to lay out the contents of each box? I was thinking of using a 2 by 2 grid sizer but I'm not sure how to make the text boxes to expand to be as wide as possible while making the labels stay as small as possible (but also maintaining the alignment between the 2 text boxes)?</p>