title: How do I add a toolbar to a region with ExtJS
body: <p>I have a border layout in ExtJS, </p>
  
  <p>The north region contains some HTML, but also needs to contain <a href="http://tomelders.com/public/toobar2.png" rel="nofollow noreferrer">a toolbar like this...</a></p>
  
  <p>So i've managed to get the border layout set up, added the html to the North Region of the layout, but I can't find any workable examples of how to implement a tool bar. </p>
  
  <p>I have found lot's of examples of toolbars on their own, but I've not got the luxury or learning ExtJs thoroughly so it's all greek to me. </p>
  
  <p>I suspect there's a way to define a tool bar outside of the cumbersome JSON style flow of creating a layout and somehow attaching it to the region, and I'm hoping it's relativley simple to do. If someone can explain how I'd do this, it would really help. </p>
  
  <p>Here's the code so far...</p>
  
  <pre><code>//make sure YOUR path is correct to this image!!
  Ext.BLANK_IMAGE_URL = '../../ext-2.0.2/resources/images/default/s.gif';
  
  
  //this runs on DOM load - you can access all the good stuff now.
  
  Ext.onReady(function(){
      var viewport = new Ext.Viewport({
          layout: "border",
          border: false,
          renderTo: Ext.getBody(),
          items: [
  
  
          // ------------------------------------------------------------------
          {
              region: "north",
              id : "toolbar-area",
              xtype: 'panel',
              html: [ "&lt;div id=\"html-header\"&gt;",
                      "&lt;div id=\"council-logo\"&gt;&lt;/div&gt;",
                      "&lt;ul id=\"ancillary-menu\"&gt;",
                          "&lt;li&gt;&lt;a href=\"#\"&gt;Logout&lt;/a&gt;&lt;/li&gt;",
                          "&lt;li&gt;&lt;a href=\"#\"&gt;Gazeteer Home&lt;/a&gt;&lt;/li&gt;",
                          "&lt;li&gt;Hello Rachel&lt;/li&gt;",
                      "&lt;/ul&gt;",
                      "&lt;img id=\"inteligent-logo\" src=\"applied-images/logos/inteligent.gif\"&gt;",
                      "&lt;/div&gt;" ],
  
              /* ++++++++++++++++++++++++++++++++++++++++++++ */
              /* The toolbar needs to go around here....      */
              /* ++++++++++++++++++++++++++++++++++++++++++++ */
  
              height: 100
          },
  
          // ------------------------------------------------------------------
          // WEST
          // ------------------------------------------------------------------
          {
              region: 'west',
              xtype: 'panel',
              split: true,
              resizeable: false,
              maxWidth : 350,
              minWidth : 349,
              collapsible: true,
              title: 'Gazetteer Explorer',
              width: 350,
              minSize: 150,
  
              // --------------------------------------------------------------
  
              title: 'Nested Layout',
              layout: 'border',
              border: false,
              id: "west",
              items: [
  
                  {
                      // ***********************************************
                      // Search Form
                      // ***********************************************
  
                      region : "north",
                      height: 300,
                      split : true,
                      id : "left-form-panel",
                      items : [{
  
                          xtype : "form",
                          id : "search-form",
                          items : [
  
                              // Authority combo box
                              // ===============================
                              {
                                  xtype : "combo",
                                  fieldLabel : "Authority",
                                  name : "authority",
                                  hiddenName : "authority",
                                  id : "authority-combo"
                              },
                              // ===============================
  
                              // Search Fieldset
                              // ===============================
                              {
                                  xtype : "fieldset",
                                  autoHeight : true,
                                  title : "Search by...",
                                  id : "search-fieldset",
                                  items : [
  
                                      // Ref Number text Box
                                      // %%%%%%%%%%%%%%%%
                                      {
  
                                          xtype : "textfield",
                                          name : "ref-number",
                                          fieldLabel : "Ref. Number",
                                          id : "ref-number-textfield"
  
                                      },
                                      // %%%%%%%%%%%%%%%%
                                      // Streetname Combo
                                      // %%%%%%%%%%%%%%%
                                      {
  
                                          xtype : "combo",
                                          name : "street-name",
                                          hiddenName : "street-name",
                                          fieldLabel : "Street Name",
                                          id : "street-name-combo"
  
                                      },
                                      // %%%%%%%%%%%%%%%%
                                      // Postcode Combo
                                      // %%%%%%%%%%%%%%%%
                                      {
  
                                          xtype : "combo",
                                          name : "postcode",
                                          hiddenName : "postcode",
                                          fieldLabel : "Postcode",
                                          id : "postcode-combo"
  
                                      },
                                      // %%%%%%%%%%%%%%%%
  
                                      // Postcode Combo
                                      // %%%%%%%%%%%%%%%%
                                      {
  
                                          xtype : "combo",
                                          name : "town",
                                          hiddenName : "town",
                                          fieldLabel : "Town",
                                          id : "towm-combo"
  
                                      },
                                      // %%%%%%%%%%%%%%%%
  
                                      // Postcode Combo
                                      // %%%%%%%%%%%%%%%%
                                      {
  
                                          xtype : "combo",
                                          name : "locality",
                                          hiddenName : "locality",
                                          fieldLabel : "Locality",
                                          id : "locality-combo"
  
                                      },
                                      // %%%%%%%%%%%%%%%
  
                                       // Search Button
                                      // %%%%%%%%%%%%%%%%
  
                                      {
                                          xtype : "button",
                                          text : "Search",
                                          id : "search-button"
                                      },  
  
                                      // Reset Button
                                      // %%%%%%%%%%%%%%%
  
                                      {
                                          xtype : "button",
                                          text : "Reset",
                                          id : "reset-button"
                                      } 
  
  
                                  ]
                              },
                              // =======================
  
  
                          ]
  
                      }]
  
                      // *********************************************
  
                  },
  
                  {
                      region: 'center',
                      html: 'Tree view goes here'
                  }
  
              ]
  
  
  
          },
  
          // ------------------------------------------------------------------
          {
              region: 'center',
              xtype: 'panel',
  
  
              // --------------------------------------------------------------
                layout: 'border',
                border: false,
                items: [
  
                    {
                      region: 'center',
                      height: 200,
                      split: true,
                      html: 'Map goes here'
                    },
  
                    {
                      region: 'south',
                      title: "Selection", 
                      split: true,
                      height: 200,
                      collapsible: true,
                      html: 'Nested Center'
                    }
  
                ]
          },
  
          // ------------------------------------------------------------------
          {
              region: 'east',
  
          },
  
          // ------------------------------------------------------------------
  
          {
              region: 'south',
          }]
  
  
      }); 
  });
  </code></pre>
  
  <p>Sorry there's so much code, but ExtJS makes me scared to touch anything that's working.</p>